canvas裁剪本质是坐标控制，导出格式由todataurl()/toblob()的mime类型决定：jpeg需填白底防透明变黑并设质量0.8–0.9；png天然支持透明无需填色；webp兼顾质量与体积但需兼容检测；统一推荐toblob()提升性能。
Canvas 本身不直接“裁剪图片”，而是通过坐标控制和绘制逻辑实现视觉与数据上的裁剪，导出格式取决于 toDataURL() 或 toBlob() 调用时指定的 MIME 类型。关键不是裁剪动作本身，而是裁剪后如何用正确方式导出目标格式。
导出为 JPEG：处理透明背景和压缩质量
JPEG 不支持透明通道，若原图含 alpha（如 PNG），直接导出会把透明区域渲染为黑色。需手动填充背景色：
- 创建新 canvas，尺寸设为裁剪区域宽高
- 获取其 2D 上下文，先调用
ctx.fillStyle = '#ffffff'，再ctx.fillRect(0, 0, width, height) - 再用
drawImage()把裁剪后的图像（或原图+源坐标）绘制上去 - 调用
canvas.toBlob(callback, 'image/jpeg', 0.9)，第三个参数是质量（0–1），推荐 0.8–0.9 平衡清晰度与体积
导出为 PNG：保留透明但文件较大
PNG 天然支持 alpha，无需额外填色，适合需要透明背景的头像、贴纸等场景：
- 确保裁剪逻辑最终绘制到一个干净的、未污染的 canvas 上
- 直接调用
canvas.toBlob(callback, 'image/png')即可，不传质量参数 - 注意：若原图来自跨域 URL，必须设置
img.crossOrigin = 'anonymous'，否则 canvas 被污染，toBlob()会静默失败
导出为 WebP：兼顾质量与体积，需检查浏览器支持
WebP 在现代浏览器中已广泛支持（Chrome/Firefox/Edge/Safari 14+），压缩率优于 JPEG，且支持透明：
- 使用
canvas.toBlob(callback, 'image/webp', 0.8)，同样支持质量参数 - 建议加兼容判断：
if (canvas.toBlob.toString().includes('webp'))或尝试生成后检测 Blob type - 若不支持，可 fallback 到 JPEG，并提示用户
统一导出流程：推荐用 toBlob() 而非 toDataURL()
toBlob() 返回二进制 Blob 对象，比 base64 字符串更轻量，适合后续上传或下载：
- 导出后可用
URL.createObjectURL(blob)生成临时链接，赋给<a download></a>实现一键下载 - 也可直接放进
FormData提交到后端，避免 base64 解码开销 - 注意 Safari 旧版本需前缀
webkitToBlob，简单封装可兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
