使用 POST 服务调用使用 jquery 从图像标签 <img> 保存图像答案

【问题标题】：save image from image tag <img> using POST service call using jquery使用 POST 服务调用使用 jquery 从图像标签 <img> 保存图像
【发布时间】：2016-10-09 04:55:31
【问题描述】：

我正在尝试从图像标签中保存图像

我试过类似文件上传的方法

但它不起作用，

 var request = new XMLHttpRequest();
        var imageUrl = info.ImageUri + '/Upload?imagePath=' + imagePath + '&imageName=' + imagename + '&imageSize=' + imagesize;
        var imageFileUri;
        request.open('POST', imageUrl);
        request.send(imgFile.files[0]);
        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                if (request.status == 200) {

有没有办法保存已经显示在图片标签中的图片？

【问题讨论】：

你的意思是要使用AJAX上传图片文件和图片信息？
你的html代码是什么？你的图片数据是base64编码的？
是的，我想使用 AJAX 上传图片文件

标签： javascript jquery html image post

【解决方案1】：

可以从图片中获取base64字符串。

html:

<img src="http://some/image/source" id="myImage"/>
<canvas id="myCanvas" style="display:none;"/>

js:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("myImage");
ctx.drawImage(img, 10, 10);
var imgString = c.toDataURL();
$.ajax({
    type: "POST",
    dataType: "JSON",
    data: {
       imageString: imgString
    }
    url: "/route/to/store/my/image",
    success: function (data) {
        alert('success');
    }
});

并在服务器端从 base64 字符串制作图像并将其与文件名一起存储。 :)

【讨论】：

在将base64字符串转换为图像时显示错误，我根据此链接工作stackoverflow.com/questions/30565687/…

【解决方案2】：

这段代码是我之前写的 jquery ui 插件的一部分。需要jquery，

var self=this;
    if(!self._chMaxSize(self)){
        dialogMsg("Max file is " + self.maxMb + "Mb", "Error", null);
        return;
    }
    var msg="";

    $.each(self.savingFiles, function(index, file) {
            msg+="<br>Sending... " + file.name + " ";
            var fd = new FormData();
              fd.append("file", file);
              fd.append("idRef", idRef);


              $.ajax({
                      xhr: function() {
                        var xhr = new window.XMLHttpRequest();

                        xhr.upload.addEventListener("progress", function(evt) {
                          if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            percentComplete = parseInt(percentComplete * 100);
                            $("#msg").html(msg +percentComplete + "%");
                          }
                        }, false);

                        return xhr;
                    },
                    type: 'POST',
                    url: 'fileUpload.htm',
                    data: fd,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success:  function (data) {
                        msg+="<br> "+ data.result.msg;
                        $("#msg").html(msg);
                        $("#msg").addClass("ui-state-highlight");
                    }, error: function(data){
                        $("#msg").html("Transfer File Error.");
                        $("#msg").addClass("ui-state-error");
                    }
              });


     });

【讨论】：