惯例，先贴传送门：https://github.com/think2011/localResizeIMG

首先说到，为嘛要压缩图片，这需求一般出现在需要上传照片（尤其是移动端）的情况下，现在手机拍出来的照片随随便便就是好几兆，无论3/4G还WIFI要上传都很吃力，而且实际上也用不着这么大呀，一般压缩到个一百几十k就够用了。因此，我们需要在用户选好照片（可能是从相册中选择也可能是直接拍摄，看我博客的另一篇文章：html5 api：device's media capture mechanism（设备的媒体捕捉机制）——利用input:file调用设备的照相机/相册、摄像机、录音机）后，先用js把照片压缩好了，再上传到服务器进行进一步的处理。

js图片压缩的原理大同小异，这里直接引用localResizeIMG官方文档的原话：

基本原理是通过canvas渲染图片，再通过 toDataURL 方法压缩保存为base64字符串（能够编译为jpg格式的图片）。

这个过程我自己手撸过，代码很多，更不用提有各种的兼容性坑，所以最后权衡再三还是直接换成了这个插件。
这插件用起来很简单（废话，用起来不简单还用来干嘛），传入照片（可以是file对象也可以直接传图片路径），设置好自己想要的分辨率（其实也就是width不超过多少px、heighti不超过多少px），然后再设置个图片质量，然后就是promise风格的callback了，直接把压缩后照片的base64传进callback里做参数，最后就是拿着这base64爱干嘛干嘛去。另外，作者还很贴心的把照片base64编码的长度也传参进来了，方便后端校验图片是否上传完整。
具体用法就不贴了，自己传送门去看呗，这里放个示例：

<input onchange="upload().bind(this)" type="file" accept="image/*" />

function upload () {

    lrz(this.files[0])

        .then(function (rst) {

            // 处理成功会执行

        })

        .catch(function (err) {

            // 处理失败会执行

        })

        .always(function () {

            // 不管是成功失败，都会执行

        });

});