推荐一个用于压缩图片的JS插件:localResizeIMG
2021-02-16 22:21
惯例,先贴传送门: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编码的长度也传参进来了,方便后端校验图片是否上传完整。
具体用法就不贴了,自己传送门去看呗,这里放个示例:
function upload () {
lrz(this.files[0])
.then(function (rst) {
// 处理成功会执行
})
.catch(function (err) {
// 处理失败会执行
})
.always(function () {
// 不管是成功失败,都会执行
});
});
下一篇:C#导入导出Excel(一)
文章标题:推荐一个用于压缩图片的JS插件:localResizeIMG
文章链接:http://soscw.com/index.php/essay/56297.html