從bootstrap模式獲取圖像URL到java腳本

Question

我正在修改一個圖像並以模態顯示它，但我沒有得到圖像URL，因為此圖像已修改並顯示在bootstrap模式中。 我想在JavaScript中獲取此圖像的URL以便上傳到服務器。

我已經看過這個鏈接但不滿意這個解決方案： https ： //stackoverflow.com/questions/18754900

HTML代碼：

 <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <a class="btn btn-primary" id="upload" download="cropped.png" href="javascript:void(0);">Upload</a>
 </div>

JavaScript代碼：

        $('#upload').click(function () {
                        var b = result.toDataURL();
                        $.ajax({
                            url: "/sf/p/customizeText",
                            type: 'GET',
                            data: b,
                            success: function (response) {

                            },
                            complete: function (response) {

                            },
                            error: function (response) {

                            }
                        });
                    });

我想將這個裁剪后的圖片網址發送到服務器，但我沒有從此圖片中獲取網址，因為裁剪后的圖片每次都是新的，並且在重新加載圖片丟失后，它會暫時保存在瀏覽器中。 我將此圖像保存在變量b中，但這是bas64格式，我們可以通過ajax直接發送到/ sf / p / customizeText（url）嗎？

我們可以在變量b中分配result.toDataURL（）並傳入ajax Like

  data: b, 

請給我一些實現此解決方案的想法。

Answer 1

裁剪的圖像很可能是base64編碼的圖像。 您應該發布圖像標記的HTML。 你可以通過attr()獲得圖像sorurce。

var imageSrc = $('#id').attr('src'); //data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE

您必須通過js獲取圖像標記的src並將其發送到服務器。 然后，您可以保存字符串並將其直接用作圖像或解碼 。 我給你一個關於如何用PHP和Java做這個的例子。

PHP

//save your data into a variable - last part is the base64 encoded image
$encoded = "data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhE";
//decode the url, because we want to use normal charackters to use explode
$decoded = urldecode($encoded);
//explode at ',' - the last part should be the encoded image now
$exp = explode(',', $decoded);
//we just get the last element with array_pop
$base64 = array_pop($exp);
//decode the image and finally save it
$data = base64_decode($base64);
$file = 'data.png';
//make sure you are the owner and have the rights to write content
file_put_contents($file, $data);

Java的

byte[] data = Base64.decodeBase64(crntImage);
try (OutputStream stream = new FileOutputStream("c:/decode/abc.bmp")) {
    stream.write(data);
}