推荐一个用于压缩图片的JS插件：localResizeIMG

惯例，先贴传送门：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 () {
            // 无论是成功失败，都会执行
        });
});