Javascript toDataURL'；s的输出是base64，如何减少上传时间和带宽的1/3？

下面代码的目标是压缩输入文件（2MB JPG文件=>500KB文件），然后在提交

时将其上载到服务器

将JPG文件中的图像导入画布并使用以下工具导出图像时：

函数doit（）{
var file=document.getElementById（'file'）。文件[0]，
canvas=document.getElementById（'canvas'），
hidden=document.getElementById（'hidden'），
ctx=canvas.getContext（“2d”），
img=document.createElement（“img”），
reader=newfilereader（）；
reader.onload=函数（e）{
img.src=e.target.result；
}
img.onload=函数（）{
ctx.drawImage（img，0,0）；
hidden.value=canvas.toDataURL（“image/jpeg”，0.5）；
}
reader.readAsDataURL（文件）；
}

var jsForm=null；
函数doit（）{
var file=document.getElementById（'file'）。文件[0]，
canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（“2d”），
img=document.createElement（“img”）；
img.src=window.URL.createObjectURL（文件）；
img.onload=函数（）{
if（！jsForm）{
jsForm=newformdata（）；
}
ctx.drawImage（img，0,0）；
canvas.toBlob（函数（blob）{
set（'image'，blob，file.name）；
}“图像/jpeg”，0.5）；
}
}
var form=document.getElementById（'form'）；
form.onsubmit=函数（e）{
e、 预防默认值（）；
如果（！jsForm）返回；
var request=new XMLHttpRequest（）；
打开（this.method | | |'POST'，this.action | |'/'）；
请求发送（jsForm）；
jsForm=null；
}

提交

为什么不干脆

img.src=window.URL.createObjectURL（file）

？@bigless的目标不是将文件加载到

img

，而是将其压缩（2MB JPG文件=>500KB文件，因此“质量因子”（这里是0.5）然后上传到服务器，无论是在提交申请时，还是与Ajax一起提交，非常感谢。与

请求不同。打开
和
请求。立即发送
，如何将此表单数据添加到现有
还包含一个
submit
按钮，因此允许用户选择何时发布表单？@Basj您不能通过编程操作文件输入，这意味着您必须使用ajax。我更新了答案。