如何在浏览器中通过Javascript压缩图像？ [英] How to compress an image via Javascript in the browser?
问题描述
TL; DR;
有没有办法直接在浏览器端压缩图片（主要是jpeg，png和gif）之前上传呢？我很确定JavaScript可以做到这一点，但我找不到一种方法来实现它。
Is there a way to compress an image (mostly jpeg, png and gif) directly browser-side, before uploading it ? I'm pretty sure JavaScript can do this, but I can't find a way to achieve it.
这里是完整的情况想要实现：
Here's the full scenario I would like to implement:
- 用户转到我的网站，并通过
输入类型=文件元素， - 通过JavaScript检索此图片，我们会进行一些验证，例如正确的文件格式，最大文件大小等，
- 如果一切正常，图像的预览会显示在页面上，
- 用户可以执行一些基本操作，例如将图像旋转90°/ 90°，按照预定比率等裁剪，或者用户可以上传另一图像并返回步骤1，
- 当用户满意时，编辑的图像被压缩和保存在本地（不保存到文件，而是保存在浏览器内存/页面中），
- 用户用姓名，年龄等数据填写表单
- 用户点击完成按钮，然后将包含数据+压缩图片的表单发送到服务器（不含AJAX），
- the user goes to my website, and choose an image via an
input type="file"element, - this image is retrieved via JavaScript, we do some verification such as correct file format, maximum file size etc,
- if every thing is OK, a preview of the image is displayed on the page,
- the user can do some basic operations such as rotate the image by 90°/-90°, crop it following a pre-defined ratio, etc, or the user can upload another image and return to step 1,
- when the user is satisfied, the edited image is then compressed and "saved" locally (not saved to a file, but in the browser memory/page),-
- the user fill a form with data like name, age etc,
- the user click on the "Finish" button, then the form containing datas + compressed image is sent to the server (without AJAX),
到最后一步的完整过程应该在客户端完成，并且应该与最新的Chrome和Firefox，Safari 5+和 IE 8 + 兼容。如果可能，应该只使用JavaScript（但我确定这是不可能的）。
The full process up to the last step should be done client side, and should be compatible on latest Chrome and Firefox, Safari 5+ and IE 8+. If possible, only JavaScript should be used (but I'm pretty sure this is not possible).
我现在没有编写任何代码，关于它已经。可以通过 File API 在本地进行文件读取，可以使用 Canvas 元素，但我找不到一种方法来执行图片压缩部分。
I've not code anything right now, but I've thought about it already. File reading locally is possible via File API, image previewing and editing could be done using Canvas element, but I can't find a way to do the image compression part.
根据 html5please.com 和 caniuse.com ，支持这些浏览器是相当困难的（感谢IE），但可以使用polyfill，如 FlashCanvas 和 FileReader 。
According to html5please.com and caniuse.com, supporting those browser is quite hard (thanks to IE), but could be done using polyfill such as FlashCanvas and FileReader.
其实，目标是减少文件大小，所以我看到图像压缩作为解决方案。但是，我知道上传的图像将显示在我的网站上，每次在同一个地方，我知道这个显示区域的尺寸（例如200x400）。因此，我可以调整图像大小以适应这些尺寸，从而减少文件大小。我不知道这种技术的压缩率是多少。
Actually, the goal is to reduce file size, so I see image compression as a solution. But, I know that uploaded images are going to be displayed on my website, every time at the same place, and I know the dimension of this display area (eg. 200x400). So, I could resize the image to fit those dimensions, thus reducing file size. I have no idea what would be the compression ratio for this technique.
你觉得怎么样？你有什么建议告诉我吗？你知道任何方式在JavaScript中压缩图像浏览器端吗？感谢您的回覆。
What do you think ? Do you have any advice to tell me ? Do you know any way to compress an image browser-side in JavaScript ? Thanks for your replies.
推荐答案
简而言之：
- 使用带有.readAsArrayBuffer的HTML5 FileReader API读取文件
- 使用文件数据创建e Blob，并获取其包含window.URL.createObjectURL(blob）
- 创建新的Image元素并设置它的src到文件blob url
- 将图像发送到画布。
- 通过canvas.toDataURL（image / jpeg，0.7）从画布中获取缩小的数据（设置您自己的输出格式和质量）
- 在后端，读取dataURI，从Base64解码，并保存
- Read the files using the HTML5 FileReader API with .readAsArrayBuffer
- Create e Blob with the file data and get its url with window.URL.createObjectURL(blob)
- Create new Image element and set it's src to the file blob url
- Send the image to the canvas. The canvas size is set to desired output size
- Get the scaled-down data back from canvas via canvas.toDataURL("image/jpeg",0.7) (set your own output format and quality)
- Attach new hidden inputs to the original form and transfer the dataURI images basically as normal text
- On backend, read the dataURI, decode from Base64, and save it
资料来源：代码。
这篇关于如何在浏览器中通过Javascript压缩图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
