canvas图像裁剪与局部重绘关键在于双画布协同、坐标精准映射和脏区最小化刷新：展示层按ui尺寸缩放显示并叠加dom裁剪框，处理层以原图像素尺寸执行精确裁剪；需通过缩放比反向映射裁剪框坐标至原始像素空间并校验边界；拖拽时仅清空重绘dirtyrect包围区域，导出时在处理画布用drawimage九参数精确提取像素。
Canvas 实现图像裁剪区域与局部重绘，关键不在“画什么”，而在于“从哪取、往哪画、画多少”。它依赖双画布分工、坐标精准映射和脏区最小化刷新，不是简单 drawImage 一下就能搞定。
双画布协同：展示层 + 处理层
裁剪功能必须用两个 canvas 配合：
- 展示画布：按 UI 尺寸设置（比如 600×400），绘制缩放后的图像供用户操作。它上面叠加一个可拖拽的 DOM 裁剪框（div），只负责交互反馈。
-
处理画布：不显示，尺寸严格等于原图真实像素（
img.naturalWidth × naturalHeight）。所有像素级裁剪操作都在这里执行——不能用展示画布截图，否则会因缩放失真。 - 图像必须等
img.onload后再绘制，避免黑图或跨域报错；展示画布用drawImage(img, 0, 0, displayW, displayH)缩放绘制；处理画布则用drawImage(img, 0, 0)原尺寸绘制。
裁剪框坐标映射到原始像素
用户看到的裁剪框位置是 UI 坐标，但裁剪要作用在原图像素上，必须反向换算：
- 先算缩放比：
scale = Math.min(displayW / originalW, displayH / originalH) - 再把裁剪框左上角
(left, top)和宽高(width, height)映射过去：realX = left / scale，realY = top / scale，realW = width / scale，realH = height / scale - 映射后要做边界校验：
realX不能小于 0，realX + realW不能超过originalW，同理 Y 和 H。
局部重绘：只清空并重画变化区域
每次拖拽裁剪框或调整大小时，不需要全画布重绘，只需更新受影响的最小矩形区域：
- 维护一个
dirtyRect = {x, y, width, height}，初始为空 - 每次移动裁剪框，就用新旧框的包围矩形更新 dirtyRect（取 min x/y，max right/bottom）
- 重绘前先
ctx.clearRect(dirtyRect.x, dirtyRect.y, dirtyRect.width, dirtyRect.height)，再只重绘该区域内需要的内容 - 若界面有静态背景（如网格线），建议提前画到离屏 canvas 中，局部刷新时直接
drawImage复制过来，避免重复计算
裁剪导出：用处理画布精确提取像素
点击“确认”时，裁剪动作发生在处理画布上：
- 调用
ctx.drawImage(sourceCanvas, sx, sy, sw, sh, dx, dy, dw, dh)，其中sx/sy/sw/sh是映射后的原始像素区域，dx/dy/dw/dh是目标 canvas 的绘制位置和尺寸 - 生成结果 canvas 后，用
toBlob(callback, 'image/jpeg', 0.9)导出更省内存；需透明通道就选 PNG，并确保原图支持 alpha - 不要用
getImageData + putImageData直接贴图——它不支持缩放，放大后模糊且无法控制质量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
