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