前端图片文件压缩

前端压缩图片的方法主要借助于canvas的toBlob和toDataURL这两个方法。

共同点

这两种方法的大致流程都是将图片先绘制到canvas元素中，然后才能进行压缩处理，并且这两种方式都只能将图片压缩成webp或者jepg格式的图片。

区别

这两种方法的区别就是他们将绘制的图形处理成图片的过程不一样。toBlob是直接将canvas中绘制的图形转换成Blob实例对象，再将Blob实例对象转成File实例对象即可。而toDataURL则是将canvas中绘制的图形转成base64编码的字符串，然后再将base64编码的字符串转成File的实例对象。

利用toBlob方法压缩图片

控制台输出的结果

企业微信截图_20220929175951.png

利用toDataURL压缩图片

对于Blob和File的第一个参数，MDN是这样描述的：

一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体。

通过执行以上代码，控制台的输出结果如图

企业微信截图.png

参考文献：

https://developer.mozilla.org/zh-CN/docs/Web/API/File/File
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array
https://developer.mozilla.org/zh-CN/docs/Web/API/atob
https://www.jb51.net/article/246673.htm