移动端Canvas“边缩放边裁剪”需分离显示坐标与原始像素坐标：缩放仅影响视觉，裁剪框始终用原始像素存储并反向换算；双指缩放以中点为锚点，单指操作区分拖拽/调整；导出时新建canvas按原始像素精确drawImage。
要在移动端用 Canvas 实现“边缩放边裁剪”，核心是把双指缩放的坐标系变换和裁剪框的像素映射统一到同一套逻辑里——缩放影响显示，但裁剪必须锚定原始图片像素，不能跟着缩放走。
缩放与裁剪坐标必须分离处理
用户双指缩放时，Canvas 上的图片只是视觉变大变小，实际裁剪区域仍对应原图的固定像素块。因此要维护两套坐标：
- 显示坐标：用于绘制缩放后的图片、拖拽裁剪框、响应 touchmove —— 这个坐标系随 scale 和 translate 动态变化；
-
原始像素坐标：用于最终 drawImage 裁剪，必须通过反向换算得到，公式为：
realX = (displayX - offsetX) / currentScale
其中 offsetX 是图片在 canvas 中的左偏移（比如居中时为 (canvas.width - img.naturalWidth × scale) / 2）。
双指缩放时保持裁剪框稳定不跳动
缩放过程中，如果裁剪框也跟着 ctx.scale() 变形，就会漂移或缩放失真。正确做法是：
- 裁剪框始终用 原始像素坐标存储（如
{x: 120, y: 80, width: 300, height: 200}）； - 每次重绘时，先按当前 scale 和偏移量，把原始裁剪区域 正向映射到显示坐标，再用 strokeRect 绘制辅助框；
- 缩放中心设为两指中点，同时更新图片的 display 偏移量，确保裁剪框视觉位置不变。
触摸事件需兼顾缩放与裁剪框交互
单指操作（拖拽、调整裁剪框）和双指操作（缩放）不能冲突，建议用状态机区分：
- touchstart 时判断 touches.length：≥2 → 进入缩放模式，记录两指距离和中心点；=1 → 检查是否点中裁剪框热区（四角/边），进入拖拽/缩放裁剪框模式；
- touchmove 中，若处于缩放模式，只更新 scale 和位移，不响应裁剪框移动；
- touchend 后清空触摸缓存，并校验裁剪框尺寸（宽高 ≥20px，不超出原图范围）。
导出时务必用原始像素重绘，不截屏展示画布
点击“确认”后，不能对当前带缩放/蒙层的 canvas 调用 toDataURL —— 那会导出失真图。必须：
- 创建新 canvas，设宽高为裁剪区域的原始像素尺寸（如 300×200）；
- 用
ctx.drawImage(img, realX, realY, realW, realH, 0, 0, realW, realH)精确抠图； - 支持 toBlob 导出，避免 base64 大图内存暴涨。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
