canvas本身不压缩图片，真正起作用的是drawimage()缩放尺寸与todataurl()/toblob()控制编码质量；需显式指定mime类型和数字型quality值，同时处理exif方向、透明背景及大图内存溢出等问题。
Canvas 本身不压缩图片，它只是提供一个可编程的像素画布；真正起作用的是你用 drawImage() 缩放尺寸 + toDataURL() 或 toBlob() 控制编码质量这两步。跳过任意一步，压缩效果都会打折扣——比如只调质量不缩尺寸，10MB 原图可能导出 8MB；只缩尺寸不设质量，PNG 默认导出体积翻倍。
为什么 toDataURL('image/jpeg', 0.8) 还是很大？
常见错误是没显式指定 MIME 类型，或传了字符串类型的质量值：
-
canvas.toDataURL()不带参数 → 默认image/png（无损、体积大） -
canvas.toDataURL('image/jpeg', '0.8')→ 第二个参数是字符串，被浏览器忽略，实际走默认质量（约 0.92） -
canvas.toDataURL('image/jpeg', 0.8)→ ✅ 正确：image/jpeg+ 数字0.8
另外，如果原图已是高压缩 JPG（比如 Chroma subsampling: 2x2），再用 Canvas 重编码反而可能变大——建议先用 identify -verbose img.jpg 检查原始状态。
如何避免 iPhone 竖拍变横、透明背景变黑？
这两个问题都发生在 drawImage() 阶段，不是导出环节的问题：
- iPhone 竖拍带 EXIF Orientation 信息，
new Image()加载后会自动旋转显示，但 Canvas 绘制时不会读这个字段 → 必须手动解析 EXIF（用exif-js或piexifjs），按Orientation值调整ctx.rotate()和宽高交换逻辑 - 透明 PNG 强转 JPEG → alpha 通道被涂成黑色 → 要么提前在 canvas 上画白底：
ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, width, height);，再drawImage()；要么改用toDataURL('image/webp', 0.8)（支持透明，但需 fallback）
大图处理时内存溢出或卡死怎么办？
Canvas 像素超过 ~1000 万（如 3840×2160）时，toDataURL() 在 Safari 或低端 Android 容易失败。稳妥做法是分级降采样：
- 先限制最长边 ≤ 1920px（用
Math.min(1920, Math.max(w, h))算缩放比） - 绘制前设
ctx.imageSmoothingQuality = 'low'，关掉抗锯齿省计算 - 避免用 CSS 缩放 canvas 元素——那只是视觉欺骗，
toDataURL()仍读全量像素 - 超大图（>5MB 文件）优先用
toBlob()，比toDataURL()内存占用低；Safari 对toBlob()兼容性也更好
最易被忽略的一点：所有压缩逻辑必须等 img.onload 触发后再执行——img.naturalWidth 在加载完成前是 0，直接算缩放比会导致 canvas 尺寸为 0，后续操作全失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
