Canvas本身不支持真正无损压缩，所谓“无损”仅指不改变像素值、保留Alpha通道、避免有损编码（如选PNG/WebP无损导出而非JPEG），并配合等比缩放与精准裁剪实现视觉无损。
Canvas 本身不支持真正意义上的“无损压缩”，因为 toBlob 或 toDataURL 输出 JPEG/WebP/PNG 时，JPEG 天然有损，PNG 虽无损但无法进一步压缩像素数据——它只是把原始像素原样编码。所谓“无损压缩”在 Canvas 场景中，实际指不引入额外失真的尺寸缩放与精准裁剪，同时保留 Alpha 通道（如需）。关键在于操作方式，而非算法。
保持无损前提：选对格式和绘制逻辑
Canvas 的“无损性”取决于三件事：是否改变像素值、是否丢弃透明通道、是否用有损编码导出。
- 导出为
image/png或image/webp（带透明）可完整保留 Alpha 通道；image/jpeg会强制丢弃透明，背景变黑，这不是压缩问题，是格式限制 - 缩放时用自然宽高比计算目标尺寸，避免拉伸变形（例如：按最长边 ≤ 1200px 缩放，宽高同比例缩小）
- 绘制前不调用
ctx.fillStyle + fillRect覆盖背景，除非你明确需要填充（比如转 JPEG 前加白底）
Canvas 裁剪：像素级精准控制
裁剪不是靠 CSS 或简单缩放，而是用 drawImage 的九参数语法直接截取源图某一块区域：
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)- 其中
sx/sy/sw/sh是原图上要裁剪的起始坐标和宽高（单位像素），完全可控 -
dx/dy/dw/dh是在 Canvas 上绘制的位置和尺寸；若设为0,0,sw,sh，就得到等比无缩放的裁剪结果 - 举例：从一张 2000×1500 图中裁出中间 800×600 区域：
ctx.drawImage(img, 600, 450, 800, 600, 0, 0, 800, 600);
导出时不引入新失真
导出环节决定最终是否“看起来无损”。重点不是质量值设 1.0，而是匹配用途：
- 要真正无损保存（如编辑稿流转），只用
canvas.toBlob(callback, 'image/png')—— 不传质量参数，PNG 默认无损 - 若需小体积又尽量少失真，用 WebP：
canvas.toBlob(callback, 'image/webp', 1.0)，支持透明且 1.0 表示无损编码（部分浏览器支持） - 避免
toDataURL('image/jpeg', 1.0)：即使质量设 1，JPEG 仍是有损格式，且丢透明；这不是“无损压缩”，是伪命题
注意浏览器兼容与内存安全
大图（如 4000×3000）在 Canvas 中操作可能触发内存警告，尤其在移动端：
- 优先用
toBlob而非toDataURL，前者返回 Blob 对象，不生成超长 Base64 字符串，更省内存 - Safari 和 Chrome 新版本均支持 WebP 无损导出，但 iOS 16 以下 Safari 不支持
toBlob的 WebP 无损，此时回退 PNG - 处理完记得调用
URL.revokeObjectURL()清理临时图片 URL，防止内存泄漏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
