使用JS压缩用户上传的图片

Posted 2022-07-30 陈小峰_iefreer

手机用户拍的照片通常会有2M以上，这对服务器带宽产生较大压力。

因此在某些应用下（对图片要求不那么高）我们可以在客户端来压缩图片，然后再提交给服务器。

总体思路是：

1. 使用html5的FileReader接口来读取用户上传的图片

2. 使用canvas drawImage接口绘制到Canvas 2d中

3. 使用canvas toDataUrl接口把图片转成base64编码字符串（这里可以降低图片质量）

4. 完成image src的替换后，表单提交时，就提交新的被压缩过的图像

这里不重复贴代码，直接看在线演示：http://wow.techbrood.com/fiddle/30625

该方案支持IE10+, FF, Chrome, Safari等现代浏览器。

有两点需要注意：

1. 注意在FF下，类似这样的处理方案必须确保canvas绘制和toDataUrl的处理是同步进行的，

也就是不能是异步处理的，否则可能会出现其他事件触发页面组合（Composite）而导致canvas缓存被清空的情况，那样toDataUrl出来的会是空白字符串。

2. 需要等image加载完成再做draw和转换的动作，否则一些浏览器会有问题。

by iefreer