前端canvas图片压缩原理解析

前提概要：

最近公司项目中，有个用户手机自己拍照上传的的需求，需要用户在wap页面中调起相机拍照上传。前端通过input[file]  capture="camera" 成功的调起了摄像机，看起来好像一切都ok了，可是后来实际测试中发现，iphone X + 像素比较高,排出来的照片有的高达十几M，而接口控制最多上传5M,造成上传失败。很显然让用户自己去压缩是很不现实的，用户体验非常差。这个场景下前端图片压缩就不得不摆到了桌面。后来github上找到一个插件compressorjs  ，经过试验后发现可以完美实现。由于当时急着完成功能，并没有对其原理做过多的研究，今天在项目上完线后的空余时间对前端的图片压缩做些研究。大致弄清楚了该插件的压缩原理。

图片压缩上传流程：

 

通过上图我们可以看到，实际压缩是通过canvas的api toBlob 来进项压缩的，这里有几个关键词：createObjectURL，canvas.toBlob,Blob , FormData ,，toDataURl我们来依次解释下。

URL.createObjectURL

改接口将文件转换成一个页面上可以显示的图片地址，利用这个地址我们可以将改图片文件画到canvas中。

 

canvas.toBlob （重点）

调用这个api 可以将canvas画布中的图片进行指定质量的压缩，并转化成Blob对象返回给回调函数，我们来看一下它的用法

/*
* callback 回调函数，返回处理后的Blob
* type &nbs