推荐一个用于压缩图片的JS插件:localResizeIMG
来源:互联网 发布:光电效应 知乎 编辑:程序博客网 时间:2024/05/11 18:31
惯例,先贴传送门: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 () { // 不管是成功失败,都会执行 }); });
- 推荐一个用于压缩图片的JS插件:localResizeIMG
- 前端图片压缩上传插件localResizeIMG的使用
- H5使用localResizeIMG插件压缩图片后并上传
- 利用LocalResizeIMG插件压缩图片通过ajax上传图片(ASP版)
- LocalResizeIMG+asp.net实现图片压缩上传
- 推荐一款js压缩插件
- 推荐一个图片预览的插件
- 使用spring mvc+localResizeIMG实现HTML5端图片压缩上传
- localResizeIMG先压缩后ajax无刷新上传图片
- 推荐一个压缩图片,但是品质影响不大的网站
- 8个用于图片展示的jQuery插件及教程推荐
- 8个用于图片展示的jQuery插件及教程推荐
- 推荐一个可以访问外网的插件,用于Google浏览器
- 推荐一个用于在Xcode控制台显示中文的插件FKConsole。
- 推荐一款jquery前端插件(zoomify),灯箱效果插件(用于图片看大图的效果),简单易用!
- 分享一个前端等比压缩图片插件
- 用于图片切割,图片压缩,缩略图的生成
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
- 带你了解Fresco
- 我的Android进阶之旅------>Android Service学习之AIDL, Parcelable和远程服务实例
- (三十五)帮贴吧人解答的一道题
- c#,catch(Exception ex)的ex是什么意思
- jquery删除简单式动画
- 推荐一个用于压缩图片的JS插件:localResizeIMG
- 稳压二极管原理及使用
- Java Web开发之httpServletRequest获取客户端真实ip
- 另一种禁用隐式动画的方式
- Jira 服务器
- 语音识别系统原理介绍---从gmm-hmm到dnn-hmm
- (三十六)让常量只读——const限定符
- android studio用svn团队项目共享
- 百度地图3.5绘制轨迹线