base64代码通过javascript、ajax发送到服务器答案

【问题标题】：base64 code send to server by java script, ajaxbase64代码通过javascript、ajax发送到服务器
【发布时间】：2018-06-04 22:24:41
【问题描述】：

我正在使用 Html5、Java 脚本、ajax 和 java。我正在将图像从桌面上传到裁剪，裁剪后它在同一页面的引导模式中显示。但是我没有得到这个图像的 URL，我得到了一些 Base64 代码，当我发送这个 base64 代码时它不起作用。

我看过这篇文章，但我没有从这个链接得到任何解决方案： https://stackoverflow.com/

此代码为静态图片，首次展示。

我的代码：

HTML：

  <div class="img-container">
         <img src="../assets/img/picture.jpg" alt="Picture">
    </div>
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
 <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <a class="btn btn-primary" id="download"  download="cropped.png" href="javascript:void(0);">Upload</a>

 </div>
</div>

Java 脚本代码：

     (function () {
            var $image = $('.img-container > img');
            var $download = $('#download');
        $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
                    if (!$download.hasClass('disabled')) {
                        $download.attr('href', result.toDataURL());
                        //console.log("*****************"+result.toDataURL());
                        var swapUrl = result.toDataURL();
                        console.log("*******" + swapUrl);

//                        document.getElementById('replaceMe').src = swapUrl;

                        $('#download').click(function () {
                            var b = result.toDataURL();
                            $.ajax({
                                url: "/sf/p/customizeText",
                                type: 'GET',
                                data: b,
                                success: function (response) {
                                    console.log("999999999999999999999999999999999----------------" + b)
                                },
                                complete: function (response) {

                                },
                                error: function (response) {

                                }
                            });
                        });
                    }
}

我将 result.toDataURL() 分配给变量 b。但它显示了一些 base64 代码。我如何将此图像发送到服务器。

我给了一个sn-p。请给我一些想法来实现这个解决方案。

【问题讨论】：

当您拥有图像的 base64 编码数据后，您可以重新创建图像服务器端。只需将您的 Base64 数据与其余数据一起发送到服务器，然后使用（如果 php）base64_decode(base64) 和 imagecreatefromstring(decoded_Base64_data) 重新创建它
你使用什么服务器端语言.. PHP？
我正在使用高级 java
上一个线程是否可以帮助您从 base64 服务器端创建图像？ stackoverflow.com/questions/17506428/… .. 无论如何，第一步就是在服务器端接收 base64 编码的图像字符串，然后从那里重新创建该字符串的图像..

标签： javascript java jquery ajax

【解决方案1】：

您好，您也可以查看此解决方案

Javascript 代码

    var base64before = document.querySelector('img').src;
    var base64 = base64before.replace(/^data:image\/(png|jpg);base64,/, "");
    var httpPost = new XMLHttpRequest();
    var path = "your url";
    var data = JSON.stringify(base64);

    httpPost.open("POST", path, false);
    // Set the content type of the request to json since that's what's being sent
    httpPost.setRequestHeader('Content-Type', 'application/json');
    httpPost.send(data);

这是我的 Java 代码。

    public void saveImage(InputStream imageStream){
    InputStream inStream = imageStream;

    try {
        String dataString = convertStreamToString(inStream);

        byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(dataString);
        BufferedImage image = ImageIO.read(new ByteArrayInputStream(imageBytes));
        // write the image to a file
        File outputfile = new File("/Users/paul/Desktop/testkey/myImage.png");
        ImageIO.write(image, "png", outputfile);

        }catch(Exception e) {
            System.out.println(e.getStackTrace());
        }
    }



  static String convertStreamToString(java.io.InputStream is) {
    java.util.Scanner s = new java.util.Scanner(is).useDelimiter("\\A");
    return s.hasNext() ? s.next() : "";
  }

【讨论】：