以下代码(受 HTML5 Pre-resize images before uploading 的主要答案启发)从 <input type="file">
中获取选定的图像文件。 , 将其重新压缩为质量为 50% 的 JPG 到变量 dataurl
中.
问题:如何替换<input type="file">
的内容通过这个新压缩的文件?这样在提交 <form>
时,将要提交的是这个新文件?
注意:我不想使用 AJAX 进行上传,而是 <form>
的标准 POST . “已发布”文件应为 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" />
最佳答案
看来我们不能修改<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" />
输出 hidden
<form>
中的字段是 base64 编码的,即类似于:
data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
关于javascript - 如何用 canvas.toDataURL 的结果替换文件输入的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51052731/