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

Question

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

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

但它不起作用，

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

有什么方法可以保存已经显示在图片标签中的图片吗？

Answer 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 字符串制作图像并使用文件名存储它。 :)