在浏览器端用H5实现图片压缩上传

多年互联网行业经验,对HTML5,node端,前端框架,构建工具有浓厚的兴趣,目前担任专车前端组的技术负责人

一、需求的场景:

在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上。 功能实现后我们发现一个问题,公司公共的服务器有 2M 图片的限制,而用户手机目前绝大多数都支持高清拍照,尺寸普遍在 3000+ x 2000+ 的大小;

所以我们采用了在浏览器端通过 HTML5 的 fileReader 接口来处理上传文件的大小,将重新处理压缩后的文件在传给后端,这样在保证了图片基本质量(由于证件图片,我们只关心证件号码是否清晰)的情况下,也能够做到网络传输内容的最小化,让上传变得更快,给用户较好的体验。

二、逐步分析:

首先我们上传的文件在 input 事件的默认参数里面是一个 file 类型,他是 Binary Large Object 的一个子集,需要将 Blob 类型转换成 DataUrl,能够被 HTML5 本地的 Canvas 画布解析,通过 Canvas 画布根据一定的压缩比例重新压缩后,再将图片转换成 Blob 传到公司公共的图片服务器上。

三、具体实现逻辑:

1. 监听本地 input 框 change 事件,当内容变化,从回调函数的参数中拿到 file 文件; 2. 判断当前浏览器是否支持本地压缩(是否支持 HTML5 的 fileReader 方法); 3. 如果不支持本地压缩,采用传统方式直接将原始图片上传到服务器上; 4. 如果支持浏览器的本地压缩,那么进入到本地压缩的流程; 5. 压缩完成后将最新的 blob 类型文件传递到公司服务器上;

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180109B033Z500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券