从 img src 属性上传修改后的图像

【问题标题】：Upload modified image from img src attribute从 img src 属性上传修改后的图像
【发布时间】：2021-03-30 00:35:30
【问题描述】：

我正在使用来自here的代码：

调整图像输入的大小，效果很好。问题是将生成的图像上传到我的服务器。这是我要上传的：

<img id="preview" name="img" src="blob:http://127.0.0.1:8081/5878134f-c042-4990-bc00-8e6f198f07f5">

连同一个 id，传入模板。我正在使用bottle.py 服务器端，可能希望通过formdata 上传文件，但根本无法正常工作。

【问题讨论】：

标签： javascript xmlhttprequest bottle

【解决方案1】：

我可以建议你将你的图片转换成base64字符串并以此格式发送到服务器。

有很多方法可以用来进行这种转换，其中之一是：

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var base64 = getBase64Image(document.getElementById("imageid"));

还有其他方法可以比这更好。这取决于您的前端框架。

【讨论】：