canvas裁剪导出偏移因未校正devicepixelratio和css缩放；需用getboundingclientrect()结合canvas.width/clientwidth算缩放比，再换算裁剪坐标；drawimage必须用9参数版并正确传入源图坐标。
Canvas裁剪区域坐标计算不准，导致导出图像偏移
头像裁剪的核心是把用户拖拽/缩放后的裁剪框映射到原始图片像素坐标，很多人直接用 getBoundingClientRect() 获取裁剪框位置，却忽略了 Canvas 的 devicePixelRatio 和 CSS 缩放带来的像素错位。结果就是导出图里人头被切掉一半。
- 必须用
canvas.getBoundingClientRect()获取显示尺寸，再结合canvas.width / canvas.clientWidth算出实际像素缩放比 - 裁剪框的
left、top要除以该缩放比，才能对应到 Canvas 像素坐标系 - 原始图片加载后需用
img.naturalWidth和img.naturalHeight获取真实分辨率，不能依赖img.width/img.height（它们是 CSS 渲染尺寸）
drawImage 参数传错顺序，裁剪结果全黑或空白
ctx.drawImage() 有 3 种参数签名，头像裁剪必须用 9 参数版本：源图、源x、源y、源宽、源高、目标x、目标y、目标宽、目标高。传错一个，Canvas 就不画任何东西——连报错都没有，只会静默失败。
- 常见错误：把「裁剪框在 Canvas 上的位置」当成
sourceX，其实那是目标位置；真正要填进前两个参数的是「在原始图片上该取哪一块」 - 换算公式：
sourceX = (cropLeft * img.naturalWidth) / canvas.width，其中cropLeft是裁剪框左边界相对于 Canvas 左边的像素值（已按 devicePixelRatio 校正） - 务必确保
sourceX + sourceWidth ，否则超出范围的部分会被截断为透明，看起来像黑块
导出为 JPEG 时背景变黑，PNG 又太大
Canvas 默认透明背景，导出 JPEG 会把透明区域渲染成黑色；导出 PNG 虽然保透明，但头像通常不需要透明通道，文件体积翻倍还影响 CDN 缓存效率。
- 导出前先用
ctx.fillStyle = '#ffffff'+ctx.fillRect(0, 0, canvas.width, canvas.height)填白底 - 调用
canvas.toDataURL('image/jpeg', 0.85)，质量设 0.85 是体积和清晰度的合理平衡点 - 如果后端明确要求 PNG（比如需要支持透明图标），才用
toDataURL('image/png')，否则一律走 JPEG
移动端 touch 事件没做防抖，手指一滑就跳好几下
在 iOS Safari 或安卓 Chrome 上，touchmove 触发频率远高于预期，不做节流会导致裁剪框疯狂抖动、坐标计算混乱，甚至触发多次 drawImage 导致内存泄漏。
- 用
requestAnimationFrame包一层，而不是简单setTimeout(..., 16)：它能和屏幕刷新率对齐，更顺滑 - 记录上一次处理时间戳，两次
touchmove间隔小于 16ms 就直接return - 别忘了在
touchend后手动触发一次绘制——因为最后一次 move 可能被节流掉了
真正的难点不在 Canvas API 本身，而在于把用户交互坐标、CSS 渲染尺寸、设备像素比、图片原始分辨率这四层关系理清楚。漏掉任意一层，裁剪结果就会“差一点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
