使用Canvas可在浏览器高效压缩图片，先创建canvas并用drawImage按比例缩放图像以减少像素量，再通过toBlob设置quality参数（如0.75）将JPEG体积降至30%~50%且清晰度损失小；对超大图可分块绘制避免内存溢出，并结合Web Worker异步处理防止界面卡顿，兼顾压缩效率与用户体验。
直接在浏览器中实现高效的图片压缩，Canvas 是一个非常实用的工具。它不仅能快速处理图像数据，还能通过调节参数控制压缩质量与体积。核心思路是利用 Canvas 的绘图能力将图片重新绘制为更小尺寸或更低质量的版本，再导出为新的图片数据。
使用 drawImage 调整图像尺寸
图片体积大的主要原因是分辨率过高。通过 Canvas 可以按比例缩小图片：
- 创建一个临时 canvas 元素，并获取其 2D 上下文
- 使用 drawImage(img, 0, 0, targetWidth, targetHeight) 将原图绘制到更小的画布上
- 缩小尺寸后像素总量减少，自然降低文件大小
注意保持宽高比，避免图像变形。可以按最大边进行等比缩放，比如限制最长边不超过 1920 像素。
通过 toBlob 或 toDataURL 控制输出质量
Canvas 提供两个方法导出图片：toDataURL 和 toBlob。后者更推荐，因为它支持异步处理且内存效率更高。
- 调用 canvas.toBlob(callback, 'image/jpeg', quality)
- quality 参数取值 0 到 1，0.7～0.8 通常能在清晰度和体积之间取得良好平衡
- 对 PNG 图片可先转换为 JPEG（前提是不需要透明通道），节省更多空间
例如设置 quality 为 0.75，通常能将 JPEG 图片压缩到原大小的 30%～50%，人眼几乎看不出差异。
分块处理超大图片避免内存溢出
对于几千万像素的图片，直接加载可能触发浏览器内存限制。可以采用分块绘制策略：
- 将原图划分为多个区域，逐块绘制到 canvas
- 每块处理完成后释放引用，避免累积占用
- 适用于移动端或低性能设备
虽然实现复杂一些，但在处理相机直出照片时非常必要。
结合 Web Worker 异步执行避免界面卡顿
图像压缩是 CPU 密集型操作。若在主线程执行，会导致页面响应变慢。
- 将压缩逻辑放入 Web Worker
- 通过 postMessage 传递图片数据（需注意跨域限制）
- Worker 中完成 canvas 操作后返回 Blob 结果
这样用户操作不会被阻塞，提升整体体验。
基本上就这些。合理使用 Canvas 的绘制和导出能力，配合尺寸调整、质量控制和异步处理，就能实现高效又稳定的前端图片压缩。关键是根据实际场景权衡清晰度与体积，不盲目追求高压缩率。
