从图像标签<img>使用jquery调用POST服务

save image from image tag <img> using POST service call using jquery

本文关键字：jquery 服务调用使用 POST img 图像标签更新时间：2023-09-26

我试图从图像标签中保存图像

我已经尝试过像文件上传方法

但它不工作，

 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:

<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字符串生成图像，并将其与文件名一起存储。:)

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

     });