用canvas实现图片动态裁剪的核心逻辑是：先通过getBoundingClientRect()获取canvas真实坐标，再将鼠标/触摸点映射到原始像素坐标，最后用drawImage在新canvas中按原始尺寸精确抠图。

用 canvas 实现图片动态裁剪的核心逻辑

HTML5 本身没有内置“拖拽裁剪”控件，必须靠 canvas + 原生事件（mousedown/mousemove/mouseup）手动实现裁剪框的绘制与更新。关键不是“怎么画”，而是“怎么把用户拖拽的坐标映射到原始图片像素区域”。一旦缩放或居中显示图片，裁剪框坐标必须反向计算回原始尺寸坐标，否则导出的裁剪图会错位。

常见错误现象：canvas 上看到裁剪框位置正常，但调用 ctx.getImageData() 或 canvas.toDataURL() 导出后，图片内容和框选区域完全不匹配——基本都是忘了做缩放比换算。

• 先用 img 加载原始图片，获取 img.naturalWidth 和 img.naturalHeight
• 在 canvas 上按需缩放绘制（比如等比缩放到容器宽高内），记录缩放比 scale = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight)
• 拖拽时所有鼠标坐标都要除以该 scale，再减去图片在 canvas 中的偏移量（(canvas.width - img.naturalWidth * scale) / 2 等），才能得到对应原始像素的裁剪区域

getBoundingClientRect() 是拖拽定位的可靠起点

不要直接用 event.clientX / event.clientY，它们相对于视口，而 canvas 可能有 margin、border 或滚动偏移。必须用 canvas.getBoundingClientRect() 获取 canvas 左上角在视口中

示例片段：

const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

这个 x/y 才是真正落在 canvas 像素坐标系内的点。后续所有拖拽起始点、移动距离、裁剪框四边计算，都基于它。漏掉这一步，滚动页面后拖拽立刻失灵。

裁剪导出前必须用 drawImage() 重绘到新 canvas

不能直接从原 canvas 截取——因为原 canvas 上可能叠加了辅助线、半透明蒙层、缩放后的图片，getImageData() 读出来的是合成后的像素，不是原始图片数据。

正确做法：创建一个干净的临时 canvas，用原始图片和计算出的原始像素裁剪区域（左、上、宽、高），调用 ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 精确抠图。

• sx, sy: 裁剪起始点（单位：原始图片像素）
• sw, sh: 裁剪宽高（同样单位：原始图片像素）
• dx, dy, dw, dh: 输出到新 canvas 的目标位置和尺寸（通常设为 0, 0, sw, sh）

如果跳过这步，导出图会出现模糊、色差、错位，尤其是当原始图分辨率远高于 canvas 显示尺寸时。

移动端 touch 事件要单独处理，且禁用默认行为

PC 端用 mouse 事件够用，但移动端必须监听 touchstart/touchmove/touchend，且每次事件里都要取 event.touches[0]（不是 changedTouches），否则多指操作会干扰单裁剪逻辑。

关键细节：touchmove 必须加 event.preventDefault()，否则页面会触发默认滚动，裁剪框瞬间断连。但加了之后，又得手动处理 canvas 区域内的滚动穿透问题——最稳妥的做法是给 canvas 容器加 css: touch-action: none，一劳永逸。

容易被忽略的地方：很多教程只写 PC 版，结果在 iPad 或安卓浏览器里完全无法拖动裁剪框，问题就出在这里。不是代码逻辑错，是事件没接管住。