前端JS图片压缩处理

2020-10 分享

近期工作遇到了用户上传图片由前端压缩图片大小，再传到OSS。这样可以减少用户上行传输的数据量，减少用上传的等待时长，优化用户体验。

方案：利用js现成canvas。

Canvas 对象提供的 toDataURL() 方法，该方法接收 type 和 encoderOptions 两个可选参数。 type 表示图片格式，默认为 image/png。而 encoderOptions 用于表示图片的质量，在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92，其他参数会被忽略。

除了toDataURL() 方法之外，它还提供了一个 toBlob() 方法，和 toDataURL() 方法相比，toBlob() 方法是异步的，因此多了个 callback 参数，这个 callback 回调方法默认的第一个参数就是转换好的 blob文件信息。toBlob(callback, [type], [encoderOptions]) 参数 encoderOptions 用于针对image/jpeg 格式的图片进行输出图片的质量设置。

流程：
1.读取用户上传的 File 对象，转化成 Image 对象，再写入到 Canvas 画布，最后由 Canvas 对象 API 对图片的大小和尺寸输出调整，转换成data URL数据，实现压缩目的。

（图为一张png格式图片转化为base64字符串形式）

由4个部分组成：前缀（data:）、数据类型 (image/png)、非文本可选的标记（ base64 ）、数据本身（后面的一大串）

2.上传到OSS上，OSS需要的是Blob二进制类型的大对象
3.上传成功后把OSS响应回来的url回显，顺便把图片地址给了后端

完毕。

（注：如果对于画质要求过高，原图片像素过大这个方法不使用。需要借助后端服务能力，使用算法）