canvas 图片裁剪组件核心是保持坐标一致性：缩放比需在 img.onload 后立即计算并固化为只读变量 scaleratio，所有拖拽、缩放、锚点操作均基于此换算至原始像素空间，导出前必须归一化裁剪框坐标。
Canvas 实现交互式拖拽缩放的图片裁剪组件，核心不是堆砌功能，而是守住坐标一致性——所有用户操作（拖、缩、调锚点）都必须映射回原始图片像素空间，前端显示只是“镜像”，导出才是“真相”。
缩放比必须在图片加载后立即计算并固化
缩放比是整套逻辑的基石。它不是 canvas 宽高比，而是 原始图片尺寸 / 当前 canvas 显示尺寸（取宽高方向中更严格的那个，确保图片完整可见）。这个值必须在 img.onload 触发后立刻算出，并缓存为只读变量（如 scaleRatio），后续所有坐标换算都依赖它。如果等到 resize 或 drag 时再临时计算，极易因异步或多次触发导致比例漂移，裁剪框错位。
拖拽与缩放统一用 pointer 事件链
- 监听
pointerdown：记录起始 clientX/clientY，立即调用setPointerCapture()，防止移动端手指滑出 canvas 区域后事件丢失 - 在
pointermove中：用偏移量更新裁剪框的 left/top/width/height，再通过scaleRatio换算成原始坐标（例如：显示框 left=120 → 原图 x = 120 × scaleRatio） - 监听
wheel或双指 touchmove 时：以鼠标/双指中心为锚点缩放——先 translate 到该点，scale，再 translate 回原位；整个过程包裹在ctx.save()/restore()内，避免污染画布状态
8 锚点控制需区分行为并限制边界
四角（nw/ne/sw/se）和四边中点（n/s/e/w）共 8 个锚点，每个绑定唯一方向标识。点击时按像素距离阈值判定是否命中（PC 端建议 ≤6px，移动端 ≥12px）。拖动时行为分离：
- 拖角点：同时调整 x、y、width、height，但 width/height 不得小于 20 像素（防无效裁剪）
- 拖边点：仅修改对应单边（如拖 'n' 只改 y 和 height，width 保持不变）
- 所有调整后，强制约束裁剪框不越界：x ≥ 0、y ≥ 0、x + width ≤ naturalWidth、y + height ≤ naturalHeight
导出前必须做归一化校验
用户可能拖出负坐标、超宽区域或完全脱离图片。导出前不可直接使用显示坐标，必须归一化为合法原始像素范围：
x = Math.max(0, Math.min(x, naturalWidth - width))y = Math.max(0, Math.min(y, naturalHeight - height))width = Math.max(20, Math.min(width, naturalWidth - x))height = Math.max(20, Math.min(height, naturalHeight - y))
归一化后的四元组传给 ctx.drawImage(img, x, y, width, height, 0, 0, outputWidth, outputHeight)，才能保证裁剪结果精准无误。
