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

array_huang

惯例,先贴传送门: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 () {
            // 不管是成功失败,都会执行
        });
});
阅读 23.4k

实用至上
记录和分享我在开发过程中的心得与感悟
10.3k 声望
6.1k 粉丝
0 条评论
10.3k 声望
6.1k 粉丝
文章目录
宣传栏