9
如何在浏览器中通过Javascript压缩图像？
TL; DR; 上传之前，有没有一种方法可以直接在浏览器端压缩图像（主要是jpeg，png和gif）？我很确定JavaScript可以做到这一点，但是我找不到实现它的方法。 这是我要实现的完整方案： 用户访问我的网站，然后通过input type="file"元素选择图片， 该图片是通过JavaScript检索的，我们进行了一些验证，例如正确的文件格式，最大文件大小等， 如果一切正常，则会在页面上显示图像的预览， 用户可以执行一些基本操作，例如将图像旋转90°/ -90°，按照预定义的比例进行裁剪等，或者用户可以上传其他图像并返回步骤1， 当用户满意时，然后将编辑后的图像压缩并本地“保存”（不保存到文件中，而是保存在浏览器的内存/页面中），- 用户使用姓名，年龄等数据填写表单， 用户单击“完成”按钮，然后将包含数据和压缩图像的表单发送到服务器（不使用AJAX）， 直到最后一步的完整过程都应该在客户端完成，并且应该与最新的Chrome和Firefox，Safari 5+和IE 8+兼容。如果可能的话，应该只使用JavaScript（但是我很确定这是不可能的）。 我现在还没有编写任何代码，但是我已经考虑过了。可以通过File API在本地读取文件，可以使用Canvas元素完成图像预览和编辑，但是我找不到找到图像压缩部分的方法。 根据html5please.com和caniuse.com的说法，要支持这些浏览器是非常困难的（由于IE），但是可以使用诸如FlashCanvas和FileReader的polyfill来实现。 实际上，目标是减小文件大小，因此我将图像压缩作为解决方案。但是，我知道上载的图像将每次都在同一位置显示在我的网站上，并且我知道该显示区域的尺寸（例如200x400）。因此，我可以调整图像大小以适合这些尺寸，从而减小文件大小。我不知道这种技术的压缩率是多少。 你怎么看 ？您有什么建议要告诉我吗？您知道在JavaScript中压缩图像浏览器端的任何方法吗？多谢您的回覆。