推荐一个用于压缩图片的JS插件:localResizeIMG
2015-12-03 16:13
453 查看
惯例,先贴传送门:https://github.com/think2011/localResizeIMG
首先说到,为嘛要压缩图片,这需求一般出现在需要上传照片(尤其是移动端)的情况下,现在手机拍出来的照片随随便便就是好几兆,无论3/4G还WIFI要上传都很吃力,而且实际上也用不着这么大呀,一般压缩到个一百几十k就够用了。因此,我们需要在用户选好照片(可能是从相册中选择也可能是直接拍摄,看我博客的另一篇文章:html5 api:device’s media capture mechanism(设备的媒体捕捉机制)——利用input:file调用设备的照相机/相册、摄像机、录音机)后,先用js把照片压缩好了,再上传到服务器进行进一步的处理。
js图片压缩的原理大同小异,这里直接引用
基本原理是通过canvas渲染图片,再通过 toDataURL 方法压缩保存为base64字符串(能够编译为jpg格式的图片)。
这个过程我自己手撸过,代码很多,更不用提有各种的兼容性坑,所以最后权衡再三还是直接换成了这个插件。
这插件用起来很简单(废话,用起来不简单还用来干嘛),传入照片(可以是file对象也可以直接传图片路径),设置好自己想要的分辨率(其实也就是width不超过多少px、heighti不超过多少px),然后再设置个图片质量,然后就是promise风格的callback了,直接把压缩后照片的base64传进callback里做参数,最后就是拿着这base64爱干嘛干嘛去。另外,作者还很贴心的把照片base64编码的长度也传参进来了,方便后端校验图片是否上传完整。
具体用法就不贴了,自己传送门去看呗,这里放个示例:
首先说到,为嘛要压缩图片,这需求一般出现在需要上传照片(尤其是移动端)的情况下,现在手机拍出来的照片随随便便就是好几兆,无论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 () { // 不管是成功失败,都会执行 }); });
相关文章推荐
- javascript,css3加载动画
- javascript第四弹——变量、作用域、内存
- JavaScript Window - 浏览器对象模型与Window Screen与Window Location
- 破解由于异步执行而导致的JS插件未加载就使用的问题
- JS上传图片本地实时预览缩略图
- Javascript操作DOM常用API总结
- js.prototype最深刻的理解
- JavaScript_DOM编程艺术第二版学习笔记-第5章
- js控制浏览器后退
- escape()、encodeURI()、encodeURIComponent()区别详解
- JS根据动态生成的字符串,验证是否存在对应function并执行
- JS正则获取参数值
- 使用 后退键/history.back()出现"警告: 网页已过期的解决办法"
- xStream完美转换XML、JSON
- dTree JS 基本用法
- JavaScript Promise技术
- js截取字符串
- js 数字 转换为 千分位
- jsonp 实例
- JSON详解