Canvas自定义图片裁剪核心是将显示坐标精准映射为原图像素坐标：加载后计算等比缩放比并缓存；用pointer事件实现跨端拖拽与8锚点缩放；实时换算realX/Y/Width/Height；严格校验边界与最小尺寸；导出时用原图坐标drawImage到新canvas生成Blob。
网页端用 Canvas 实现自定义区域图片裁剪，核心不是“画一个框”，而是把用户看到的交互框，准确映射回原始图片的真实像素坐标，并用 drawImage 精确提取。关键在坐标换算、锚点控制和导出逻辑，不依赖第三方库也能稳定运行。
加载图片后立刻计算缩放比并缓存
原始图宽高（img.naturalWidth/naturalHeight）和 canvas 显示区域尺寸（比如 500×400）必然不同。必须在 img.onload 后立即算出缩放比：
- 横向缩放比 =
img.naturalWidth / canvas.clientWidth - 纵向缩放比 =
img.naturalHeight / canvas.clientHeight - 若保持等比缩放，取两者中较小值作为统一缩放比，并缓存为常量（如
scaleRatio），后续所有坐标换算都基于它
用 pointer 事件实现拖拽与 8 锚点缩放
避免只监听 mouse 事件导致移动端失效或 resize 后错位：
- 在裁剪框上监听
pointerdown，调用setPointerCapture(e.pointerId)锁定事件流 - 根据点击位置判断是否落在某个锚点内（如 'se' 表示右下角），PC 端检测距离 ≤6px，移动端 ≥12px
- 拖动时按锚点类型约束行为：
– 角点（'nw'/'se'等）：同步更新 x、y、width、height
– 边点（'n'/'w'等）：只改对应方向的坐标和尺寸
– 框中心：只改 x、y（平移） - 每次更新后，实时将显示坐标转为原图坐标：
realX = displayX * scaleRatio，realWidth = displayWidth * scaleRatio
裁剪区域必须做边界与最小尺寸校验
用户可能拖出无效区域，导出前必须归一化，否则 drawImage 会静默失败或截出黑块：
- 限制最小宽高为 20px（防止空区域）：
Math.max(20, realWidth) - 限制不超出原图范围：
realX = Math.max(0, Math.min(realX, naturalWidth - realWidth)) - 同理处理
realY和realHeight，确保裁剪框完全落在有效像素区内
导出时用原图坐标 drawImage 到新 canvas
不能对展示 canvas 截图（含缩放失真），也不能用 getImageData（性能差、内存高）：
- 创建新 canvas（
outputCanvas），设为目标尺寸（如 300×300） - 调用
ctx.drawImage(img, realX, realY, realWidth, realHeight, 0, 0, outputWidth, outputHeight) - 再用
outputCanvas.toBlob(callback, 'image/jpeg', 0.9)生成 Blob，既清晰又省内存
