Javascript 如何在表单中包含数据URI

我的

中有一个

元素，用户可以在其中放置一个图像：

<input type="file" name="imageUpload" accept="image/png|image/jpg|image/jpeg|image/svg+xml" data-type="picture" value="">

问题是表单有很多选项，用户应该继续修改表单，因此我试图找到一种方法将压缩图像重新注入表单（如果可能的话，不使用FormData对象）

更新（日志）：

怎么做？

---

或者有更好的解决方法吗？

事实上，与二进制图像文件相比，数据URL永远不会被“压缩”。而且我认为您不能在表单输入中将base64字符串作为实际图像“重新输入”，您必须将其作为隐藏输入中的字符串或其他内容发送，正如Blazemonger在上面提到的那样，图像根本不会被压缩，它可能会以字节为单位“更大”，即使它的尺寸“更小”。@adeneo我没有尝试过，但这看起来是可以做到的：@Blazemonger@adeneo我用我的函数日志更新了我的问题，首先是一个调整图像大小的方法，然后使用

canvas.toDataURL

时，质量几乎没有降低（制图师有上传超大图像的坏习惯）@GilleQ。-你说你担心上传大小，因为“之后”图像将在有限的硬件上使用。我问这个问题的原因是，您可能会发现，最简单的方法是通过上传表单将图像保持原样，然后在服务器端使用GraphicsMagick或ImageMagick进行调整大小，最有可能的方法是通过您选择的服务器端技术的适配器库。对于使用图像的低端硬件，您仍然会得到较小尺寸的图像。

var dataURL = canvas.toDataURL('image/jpeg', 0.9);

Original file size: 765.533203125kb / height: 1365px / width: 2048px

Width maximum: 800px | Height maximum: 1400px
--------------- After resize ---------------
|Width :800px | Height :533.203125px | Ratio :0.390625 |
--------------------------------------------

New file size: 181.3740234375kb (blob object)

-------------- New file --------------

Blob { size=185727,  type="image/jpeg",  slice=slice()}