文档章节

关于前端本地压缩图片,兼容IOS/Android/PC且自动按需加载文件之lrz.bundle.js

o
 osc_x4h57ch8
发布于 2018/04/24 13:32
字数 988
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、介绍说明
主要特点:
  ①在前端压缩好要上传的图片可以更快的发送给后端,因此也特别适合在移动设备上使用。
  ②兼容IOS/Android,修复了IOS/Android某些版本已知的BUG。
  ③按需加载文件,仅需引入lrz.bundle.js文件,例如当检测是IOS7的用户,那么会自动异步再载入修复BUG的文件,而无需担心浪费宝贵的带宽开销。
  ④原生JS编写,不依赖例如jquery等第三方库。
二、如何获取
下载地址:

https://files.cnblogs.com/files/sunyuweb/lrz.bundle.js

<script src="./lrz.bundle.js"></script>
三、如何使用

方式1:图片用于用户上传

<script src="./lrz.all.bundle.js"></script>(博客暂时没有资源可以自行Google download)

这里加载的这个有个all,和上面地址的例子可能是不一样。因为这个all的js是比较全的兼容android和ios。

如果您的图片来自用户拍摄或者上传的,您需要一个input file来获取图片。

上传图片<input type="file" capture="camera" accept="image/*" name="logo" />
capture(捕获的意思)表示调用相册相机camera,录音机video和摄像机audio。
accept 表示直接打开系统文件目录。(其实html5的input:file标签还支持一个multiple属性,表示可以支持多选。加上这个multiple后,capture就没啥用了,因为multiple是专门用来支持多选的。)

input type="file" 添加了 accept="image/*"属性在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,使得页面弹出选择文件的弹窗非常的慢6-10s,这是因为accept="image/*"会每一个文件都遍历一次所有的”image/*”文件类型。

解决办法是:删掉它或者将 * 通配符,或者修改为指定的MIME类型

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">

$(function(){
  $('input[name=logo]').on('change', function(){
    lrz(this.files[0], {width: 640}) //width:640这个代表的是图片占得内存的大小,值越小,占内存越小
      .then(function (rst) {  //请求ajax把图片地址传过去
        $.ajax({
          url: site_url + 'api/user/updLogo',
          type: 'post',
          data: {img: rst.base64}, //rst.base64就是这个图片的地址 base64字符串
          dataType: 'json',
          timeout: 200000,
          error: doAjax.error,
          success: doAjax.success,
        });
      })
      .catch(function (err) {  //捕获错误,而且一旦出错上面的then都不会执行  })
      .always(function () {  //无论成败都会执行这里   });
  });
})

<input onchange="upload()" type="file" capture="camera" />
接着通过change事件可以得到用户选择的图片
function upload () {
  lrz(this.files[0])
    .then(function (rst) {  // 处理成功会执行  })
    .catch(function (err) {  // 处理失败会执行  })
    .always(function () {  // 不管是成功失败,都会执行  });
});


方式2:如果图片不是来自用户上传的,那么也可以直接传入图片路径
lrz('./xxx/xx/x.png')
  .then(function (rst) {  // 处理成功会执行  })
  .catch(function (err){  // 处理失败会执行  })
  .always(function () {  // 不管是成功失败,都会执行  });

四、后端处理
后端最终会收到前端发送的base64字符串,接着处理字符串为图片即可。
前端生成的结果中有一个base64Len,这是字符串的长度,后端应该核对以确认是否提交完整。
五、兼容性
IE9以上及大部分非IE浏览器(chrome、微信什么的)
六、FAQ
有疑问请直接在 issues 中提问 :see_no_evil:
Q:有时拍摄完照片后,页面自动刷新或闪退了。
A:虽然已作了优化处理,但内存似乎还是爆掉了,常见于低配android手机。


Q: 怎么批量上传图片?
A: 您可以自己写个循环来传入用户多选的图片,但在移动端上请勿这样做,原因同上。


Q: 直接传入图片路径的无法生成图片
A: 可能是跨域的问题,具体请看CORS_enabled_image


Q: 想要商用可以吗?
A: 没问题,但请留意issue里已知的问题。

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

格式编号始终显示2个小数位 - Format number to always show 2 decimal places

问题: I would like to format my numbers to always display 2 decimal places, rounding where applicable. 我想将数字格式化为始终显示2个小数位,并在适用的情况下四舍五入。 Examples...

富含淀粉
57分钟前
22
0
Docker可视化工具Portainer

1 前言 从没想到Docker也有可视化的工具,因为它的命令还是非常清晰简单的。无聊搜了一下,原来已经有很多Docker可视化工具了。如DockerUI、Shipyard、Rancher、Portainer等。查看对比了一番...

南瓜慢说
59分钟前
20
0
日志系统新贵 Loki,真香!!

最近,在对公司容器云的日志方案进行设计的时候,发现主流的ELK或者EFK比较重,再加上现阶段对于ES复杂的搜索功能很多都用不上最终选择了Grafana开源的Loki日志系统,下面介绍下Loki的背景。...

庞陆阳
今天
14
0
jQuery获取select onChange的值 - jQuery get value of select onChange

问题: I was under the impression that I could get the value of a select input by doing this $(this).val(); 我的印象是我可以通过执行$(this).val();来获取选择输入的值$(this).val()......

javail
今天
13
0
道翰天琼解密宇宙信息大脑三者最核心奥秘,破解认知智能基础理论(群聊形式)

三体论是探索研究宇宙,信息和人类大脑三者关系的理论体系。是认知智能的奠基理论体系之一。宇宙和信息,信息和人类大脑,人类大脑和宇宙,三者之间存在着某种未被完全揭示的奥秘。三体论的核...

jackli2020
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部