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

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

我试过像上传文件的方法

但它不起作用

 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) {

---

有没有办法保存已显示在图像标记中的图像？

您可以从图像中获取base64字符串

html:

---

在服务器端，从base64字符串生成一个映像，并用文件名存储它。：）

这段代码是我不久前编写的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");
                    }
              });


     });

var self=this；
如果（！self.\u chMaxSize（self））{
dialogMsg（“最大文件为”+self.maxMb+“Mb”，“错误”，空）；
返回；
}
var msg=“”；
$.each（self.savingFiles，函数（索引，文件）{
msg+=“
正在发送…”+file.name+”；
var fd=新FormData（）；
fd.append（“文件”，file）；
fd.追加（“idRef”，idRef）；
$.ajax({
xhr:function（）{
var xhr=new window.XMLHttpRequest（）；
xhr.upload.addEventListener（“进度”，函数（evt）{
if（evt.长度可计算）{
var percentComplete=evt.loaded/evt.total；
percentComplete=parseInt（percentComplete*100）；
$（“#msg”）.html（msg+percentComplete+“%”）；
}
}，假）；
返回xhr；
},
键入：“POST”，
url:'fileUpload.htm'，
数据：fd，
cache:false，
contentType:false，
processData:false，
成功：功能（数据）{
msg+=“
”+data.result.msg；
$（“#msg”）.html（msg）；
$（“#msg”）.addClass（“ui状态突出显示”）；
}，错误：函数（数据）{
$（“#msg”）.html（“传输文件错误”）；
$（“#msg”）.addClass（“ui状态错误”）；
}
});
});

您的意思是想使用AJAX上传图像文件和图像信息吗？您的html代码是什么？图像数据是base64编码的？是的，使用AJAX我想上传图像文件，但将base64字符串转换为图像时显示错误，我根据此链接工作

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

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


     });