通例，先贴传送门：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 () {
            // 不管是胜利失利，都邑实行
        });
});