如何用 canvas.toDataURL 的结果替换文件输入的内容？答案

【问题标题】：How to replace a file input's content by the result of canvas.toDataURL?如何用 canvas.toDataURL 的结果替换文件输入的内容？
【发布时间】：2018-12-05 18:08:56
【问题描述】：

以下代码（受HTML5 Pre-resize images before uploading 的主要答案启发）从<input type="file"> 中获取选定的图像文件，将其重新压缩为质量为50% 的JPG 到变量dataurl 中。

问题：如何用这个新压缩的文件替换<input type="file">的内容？那么在提交<form>时，这个新文件会被提交吗？

注意：我不想使用 AJAX 进行上传，而是使用 <form> 的标准 POST。 “posted”文件应该是dataurl，即用户在<input type="file">中选择的文件应该是dataurl生成的文件。

function doit() {
    var input = document.getElementById('file'),
        canvas = document.getElementById('canvas');
    var file = input.files[0];
    var img = document.createElement("img");
    var reader = new FileReader();  
    reader.onload = function(e) { img.src = e.target.result }
    reader.readAsDataURL(file);
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataurl = canvas.toDataURL("image/jpeg", 0.5);
    console.log(dataurl);
}

<form action="/upload" method="post">
<input type="file" onchange="doit();" id="file" /><br><br>
<input type="submit" />
</form>
<canvas id="canvas" style="display: none" />

【问题讨论】：

您不能将动态创建的 Blob/File 对象添加到 HTML 表单中，如果不能使用 AJAX，您可以将 <input type="text"> 设置为文件内容的 base64 编码字符串
@PatrickEvans now you can（目前仅在 Chrome 和即将推出的 FF62 中）。
为什么不想使用 AJAX？这才是正确的方法。旁边，your compression thing is flawn.
除非您使用 FormData (ajax)，否则无法将自定义内容放入 $_FILES 中。如果你碰巧使用 ajax this 会有所帮助。
是的，这也可以。并且只需要剪切 data:image/jpeg;base64, 部分并在服务器端解码

标签： javascript html forms html5-canvas form-submit

【解决方案1】：

似乎我们无法修改<input type="file">，但我们可以将数据添加到另一个文本字段（如@PatrickEvans 建议的那样）或<input type="hidden">：

function doit() {
    var file = document.getElementById('file').files[0],
        canvas = document.getElementById('canvas'),
        hidden = document.getElementById('hidden'),
        ctx = canvas.getContext("2d"),
        img = document.createElement("img"),
        reader = new FileReader();  
    
    reader.onload = function(e) { 
        img.src = e.target.result;
    }
    
    img.onload = function () { 
        ctx.drawImage(img, 0, 0);
        hidden.value = canvas.toDataURL("image/jpeg", 0.5);
    }
    reader.readAsDataURL(file);
}

<input type="file" onchange="doit();" id="file" />

<form action="/upload" method="post">
<input type="hidden" id="hidden" />
<input type="submit" />
</form>

<canvas id="canvas" style="display: none" />

<form> 中的输出 hidden 字段是 base64 编码的，即类似于：

data:image/jpeg;base64,/9j/4AAQSkZJRgAB...

【讨论】：