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