前言（需求背景）
基于当前由后端压缩的图片，图片请求时会产生302的情况，导致页面加载速度变慢，以及前端传输未压缩的图片会占用服务器更多带宽等方面的考量。我司决定新开发一款由前端进行压缩图片的图床。
图片压缩实现方向
canvas方向
利用Canvas的绘图能力，使用 drawImage 以及 toDataURL 这两个 API，通过调整图片的尺寸或者绘图质量，来达到图片压缩的效果。
- 优点：实现简单，参数可配置化，可自定义图片尺寸，指定区域裁剪等等。
- 缺点：只有 jpeg 、webp 支持原图尺寸下图片质量的调整，来达到压缩图片的效果，其他图片格式仅能通过调整尺寸来实现。
算法方向
简单来说，通过算法减少图片上的颜色差异，牺牲图片画质。比如紧挨着的颜色相近的四个像素的颜色信息压缩前大概占16个字节，压缩后变成一个颜色就能减少近4倍。自然被压缩后文件就变小，画质自然也会降低。
- 优点：色彩丰富场景压缩率更高，参数可配置化，可自定义图片的尺寸，图片的质量等。
- 缺点：图片质量压缩损失更大。
技术调研
这里我们放弃自行开发，寻找开源库完成以上需求。
目前主流的图片压缩方案：localResizeIMG、browser-image-compression
localResizeIMG 压缩JPG 格式的插件，考虑到JPG 格式的图片不支持透明度的情况，在调研时就放弃了localResizeIMG 插件（在无需考虑透明的情况下选择localResizeIMG最优）。
browser-image-compression 压缩PNG 格式插件。PNG 格式的图片特点，高保真，支持透明度处理，但是它也有明显的问题就是体积过大。不过在经过browser-image-compression 压缩后，PNG格式的图片体积过大的缺点会得到十分有效的改善。
对比原图、熊猫压缩、browser-image-compression压缩插件
| 压缩工具 | 显示效果 | 体积 | 大小 | 压缩图 |
|---|---|---|---|---|
| 原图 | ★★★★★ | ★ | 531 KB | 左图 |
| 熊猫压缩（参照） | ★★★★★ | ★★★★ | 118 KB | 中图 |
| browser-image-compression压缩插件 | ★★★ | ★★★★★ | 79.0 KB | 右图 |
逻辑开发
-
获取上传的图片文件
- 点击上传： 点击上传使用的是choose-to-file实现点击上传功能获取上传文件。
- 拖拽上传：使用的是drop事件获取上传文件，同时使用dragover、dragleave事件判断拖拽进入和离开。
- 复制上传，利用的是paste事件监听window的粘贴事件，从而获取到上传文件。
-
使用browser-image-compression进行压缩
-
调用接口，上传压缩后的图片文件
结语
现存开源项目，对于图片的压缩，均存在有损，无法做到无损压缩
通过本次对于图片压缩技术的调研，解决了当前图床所存在的302的问题，节省了上传图片时所占用的服务器带宽。不过当前的图片压缩方案在图片显示效果上任然存在可优化的空间。