用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 或安卓浏览器里完全无法拖动裁剪框，问题就出在这里。不是代码逻辑错，是事件没接管住。
