javascript - 从引导模式获取图像 URL 到 javascript

Question

我正在修改一张图片并在模态中显示它，但我没有获取图片 URL，因为该图片已修改并在 Bootstrap 模态中显示。我想在 JavaScript 中获取这张图片的 URL 以上传到服务器。

I have already seen this link but am not satisfied this solution: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) {

                            }
                        });
                    });

我想将这个裁剪后的图像 URL 发送到服务器，但我没有收到 此图片的 URL，因为裁剪后的图片每次都是新的，而且它 重新加载图像丢失后临时保存在浏览器中。 我将这张图片保存在变量 b 中，但这是 bas64 格式，我们可以通过 ajax 直接发送到/sf/p/customizeText (url) 吗？

Can we assign result.toDataURL() in varaible b and pass in ajax Like

                            data: b,

请给我一些实现此解决方案的想法。

Answer 1

裁剪后的图像很可能是 base64 编码图像。您应该发布图片标签的 HTML。您可以通过 attr() 获取图像源。

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);
}