在浏览器端用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 类型文件传递到公司服务器上；