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

Question

我正在修改一个图像并以模式显示它，但我没有获得图像 URL，因为该图像已修改并以引导模式显示。 我想在 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) {

                            }
                        });
                    });

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

我们可以在变量 b 中分配 result.toDataURL() 并传入 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);
}