上周做一个关于移动端图片压缩上传的功能。期间猜了几个坑，在此总结下。大体的思路是，部分 API 的兼容性请参照 caniuse：利用 FileReader, 读取 blob 对象，或者是 file 对象，将图片转化为 data uri 的形式；使用 canvas，在页面上新建一个画布，利用 canvas 提供的 API，将图片画入这个画布当中；利用 canvas.toDataURL()，进行图片的压缩，得到图片的 data uri 的值上传文件。

自动裁剪压缩图片，主要用到的 FileReader、canvas、FormData、Blob 这几个 API。在移动端上真对不同版本系统和微信浏览器踩坑优化～

到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好…

在移动端，我们经常会有这样的情况发生： 用户在 3G/2G 网络情况下，上传手机拍下的照片在经过上传再下载耗时非常长，流量消耗也不少。 因此我们提出了一个要求：前端先压缩图片，在浏览器中预览，再上传到服务器，并且要兼容 Android 4.0.....