深入前端图片压缩

前言

任何研究都不是凭空产生，至少博主是这样的。

在手机端拍照后图片很大，有的甚至有 10M 多。这个时候再去上传图片，可想而知，速度是很慢的。正因如此，便有了前端图片压缩这个需求。

图片格式

传统的图片格式有 git、jpg/jpeg、png 等，谷歌后来推出了另一种压缩比更高的格式 webp。

在介绍这几种图片格式前，先说下图片的一些特性。

有损和无损

• 有损：指在图片压缩过程中，会丢失一部分图片信息，并且这种丢失是不可逆的。
• 无损：指在图片压缩过程中，图片质量没有损失，任何时候都可以从无损压缩过的图片中恢复出原本的信息。

索引色和直接色

• 索引色：用一个数字来代表一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。一般是用一个字节（8 位）来存储，这样颜色只有 2^8，即 256 种。
• 直接色：使用四个数字来代表颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。大家应该用过 rgb(255, 255, 255) 这种方式表示颜色，所以不难理解这种方式呈现的颜色大约是 2^24 种。

点阵图和矢量图

• 点阵图：也叫做位图，像素图。构成点阵图的最小单位是象素，位图就是由象素阵列的排列来实现其显示效果的，每个象素有自己的颜色信息。这种图放大后，图片会模糊，有颗粒感。
• 矢量图：也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法。这种图无论放大多少倍，由于算法不变，所以图片还是会保持原样，不会模糊。

格式	特性	备注
bmp	无损、直接色、点阵图	体积较大，目前很少适用了
git	无损、索引色、点阵图	适用于动图
jpg/jpeg	有损、直接色、点阵图	适用于色彩丰富的图像，如风景和人物照片
png8	无损、索引色、点阵图	适用于有透明要求，不需要特别丰富色彩的图像
png24	无损、直接色、点阵图	适用于有透明要求，需要特别丰富色彩的图像。该格式体积要比 jpg 大的多
webp	无损/无损、直接色、点阵图	适用于网页，但是目前兼容性稍差

图片压缩试手

如果自己从底层实现图片压缩，那可以涉及到颜色编码处理了。对于，前端工程师来说，难度还是很大的。博主这里提到的图片压缩是借助 Canvas 的 API 来实现图片的压缩处理。

先简要说下思路：

1. 通过 input 标签得到图片文件
2. 通过 URL.createObjectURL 将 file 对象转为一个内存地址（或者用 FileReader 得到 base64）
3. 创建一个 img 元素，将其 src 指向上一步的内存地址
4. 创建一个 canvas 对象，将 img 写到 canvas 画布上
5. 通过 canvas 的 toDataURL 方法压缩图片

这里给出代码：

<input type="file" id="file&