核心在于坐标映射与实时计算：选区框是用户操作与原始像素坐标的桥梁，需基于缩放比将鼠标坐标归一化为原图坐标，并通过pointer事件统一处理拖拽缩放，8锚点约束尺寸与边界，导出前强制归一化校验。
Canvas 实现图片拖拽裁剪，核心不在“画框”，而在“框怎么动、动了之后怎么算”。选区框不是静态装饰，而是连接用户操作与原始像素坐标的桥梁。它必须实时响应拖拽、缩放、边界限制，并在导出前完成坐标归一化。
选区框的坐标映射必须基于原图像素
用户看到的裁剪框在 canvas 上的位置，只是视觉参考。真正决定裁哪一块图的，是对应原始图片的 x、y、width、height 四个值。比如原始图是 3840×2160，canvas 显示区域为 800×600，缩放比就是 3840/800 = 4.8（或按 height 算 2160/600 = 3.6，取较小值保全图）。所有鼠标坐标都要先减去 canvas 在视口中的偏移（用 getBoundingClientRect() 获取），再除以这个缩放比，才能得到原始像素坐标。漏掉这步，滚动页面或缩放后框就“飘”了。
拖拽与缩放统一用 pointer 事件
只监听 mouse 系列事件会丢失移动端操作，且 resize 后坐标易错乱。正确做法是：
-
pointerdown 时记录起始 clientX/clientY，并立即调用
setPointerCapture()锁定事件流 - pointermove 中计算偏移量，更新裁剪框的 left/top/width/height，同时同步换算回原图坐标
- window.resize 时重新计算缩放比，并重置 canvas 绘制比例或背景图偏移
8 锚点控制需区分行为与约束
标准矩形裁剪框应提供 8 个可拖拽锚点（nw、n、ne、e、se、s、sw、w），每个点有唯一标识和触发阈值（PC 端建议 6px，移动端 12px）：
- 拖动角点（如 nw）：同时修改 x、y、width、height
- 拖动边点（如 n）：只改 y 和 height，width 保持不变
- 所有调整都必须限制最小尺寸（如 width ≥ 20）、不能越界（x ≥ 0，x + width ≤ naturalWidth）
导出前必须做坐标归一化校验
用户可能拖出无效区域：x 为负、width 超出原图、或整个框落在图外。导出前务必强制修正：
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, width, height) 进行精确抠图。
