如何在浏览器中通过Javascript压缩图像？

Question

TL; DR;

上传之前，有没有一种方法可以直接在浏览器端压缩图像（主要是jpeg，png和gif）？我很确定JavaScript可以做到这一点，但是我找不到实现它的方法。

这是我要实现的完整方案：

• 用户访问我的网站，然后通过input type="file"元素选择图片，
• 该图片是通过JavaScript检索的，我们进行了一些验证，例如正确的文件格式，最大文件大小等，
• 如果一切正常，则会在页面上显示图像的预览，
• 用户可以执行一些基本操作，例如将图像旋转90°/ -90°，按照预定义的比例进行裁剪等，或者用户可以上传其他图像并返回步骤1，
• 当用户满意时，然后将编辑的图像压缩并本地“保存”（不保存到文件中，而是保存在浏览器的内存/页面中），-
• 用户使用姓名，年龄等数据填写表单，
• 用户单击“完成”按钮，然后将包含数据和压缩图像的表单发送到服务器（不使用AJAX），

直到最后一步的整个过程都应该在客户端完成，并且应该与最新的Chrome和Firefox，Safari 5+和 IE 8+
兼容。如果可能的话，应该只使用JavaScript（但是我很确定这是不可能的）。

我现在还没有编写任何代码，但是我已经考虑过了。可以通过FileAPI在本地读取文件，可以使用Canvas元素进行图像预览和编辑，但是
我找不到找到图像压缩部分的方法 。

根据html5please.com和caniuse.com的说法，要支持这些浏览器非常困难（由于IE），但是可以使用诸如FlashCanvas和FileReader之类的polyfill来实现。

实际上，目标是减小文件大小，因此我认为图像压缩是一种解决方案。但是，我知道上载的图像将每次都在同一位置显示在我的网站上，并且我知道该显示区域的尺寸（例如200x400）。因此，我可以调整图像大小以适合这些尺寸，从而减小文件大小。我不知道这种技术的压缩率是多少。

你怎么看 ？您有什么建议要告诉我吗？您知道在JavaScript中压缩图像浏览器端的任何html" target="_blank">方法吗？感谢您的答复。

Answer 1

简而言之：

• 使用HTML5 FileReader API和.readAsArrayBuffer读取文件
• 使用文件数据创建一个Blob，然后使用window.URL.createObjectURL（blob）获取其url。
• 创建新的Image元素并将其src设置为文件blob url
• 将图像发送到画布。画布尺寸设置为所需的输出尺寸
• 通过canvas.toDataURL（“ image / jpeg”，0.7）从画布获取按比例缩小的数据（设置您自己的输出格式和质量）
• 将新的隐藏输入附加到原始表单，并基本上以普通文本的形式传输dataURI图像
• 在后端，读取dataURI，从Base64解码并保存