如何下载输入类型=“文件”加载的修改图像

【问题标题】：How to download an modified image loaded by input type="file"如何下载输入类型=“文件”加载的修改图像
【发布时间】：2020-08-15 02:05:36
【问题描述】：

我想下载一张我用javascript中的过滤器修改过的图片，但我不知道怎么做，这是代码

<input type="file" accept="image/*" onchange="loadFile(event)">  
    <img id="output"/>   
       var loadFile = function(event) {
            var output = document.getElementById('output');
            output.src = URL.createObjectURL(event.target.files[0]);
            output.onload = function() {
              URL.revokeObjectURL(output.src)
            }

谢谢

【问题讨论】：

这里没有收到您的问题。你为什么要下载一个已经存在于你机器上的文件，而你刚刚上传了它？
因为我会修改图片

标签： javascript html image file-upload

【解决方案1】：

为了保存图像，你可以创建一个 Canvas 元素并在 Canvas 中绘制图像，然后使用它的toDataUrl 方法转换并保存它。

const myCanvas = document.createElement("canvas");
const ctx = myCanvas.getContext("2d");
var output = document.getElementById('output');
ctx.drawImage(output, 512, 512);
const dataURL = myCanvas.toDataURL();

您还需要一些代码来将dataURL 保存到文件中，稍后dataURL 可以用作img 源或将其上传到服务器

【讨论】：