核心是在旋转后的坐标系中正确计算裁剪区域位置和尺寸：先创建外接矩形canvas并绘制旋转图像，再在此直角对齐图像上执行常规裁剪；ui交互时需将用户坐标逆向映射回原始空间。
Canvas 裁剪旋转后的图片，核心不是“先旋转再裁剪”这个顺序本身，而是在旋转后的坐标系中正确计算裁剪区域的位置和尺寸。直接对 canvas 调用 rotate() 会影响整个绘图上下文，若不处理坐标变换，裁剪框会跟着一起歪斜，导致结果错位。实际做法是：把原图按指定角度绘制到新 canvas 上（完成旋转），再在这个已旋转的图像上，用标准矩形裁剪逻辑操作。
旋转后裁剪的关键步骤
必须分两步走，且中间要“重置坐标系”：
-
第一步：创建旋转后的新图像数据
新建一个足够大的 canvas（宽高取原图旋转后的外接矩形尺寸），获取其 2D 上下文，平移画布中心、应用旋转、再绘制原图——这样得到的是像素已旋转的干净图像，所有坐标都是直角对齐的。 -
第二步：在新 canvas 上执行常规裁剪
此时图像已静态旋转完毕，可像处理普通图片一样，用ctx.getImageData(x, y, width, height)提取目标区域，再用putImageData或drawImage输出裁剪结果。 -
注意坐标转换陷阱
如果想让用户拖拽裁剪框时实时看到旋转效果，UI 层的裁剪框仍需按原始画布坐标绘制（比如用 DOM 元素覆盖），但内部计算裁剪参数时，要把用户选的(x, y, w, h)按逆向旋转矩阵映射回旋转前的坐标空间，再传给 getImageData —— 否则裁出来的会偏移或变形。
代码实现要点（精简示意）
假设原图宽高为 ow × oh，顺时针旋转 θ 弧度：
- 计算旋转后外接画布尺寸：
newWidth = Math.abs(ow * Math.cos(θ)) + Math.abs(oh * Math.sin(θ))newHeight = Math.abs(ow * Math.sin(θ)) + Math.abs(oh * Math.cos(θ)) - 绘制旋转图：
ctx.translate(newWidth/2, newHeight/2);ctx.rotate(θ);ctx.drawImage(img, -ow/2, -oh/2); - 裁剪时直接使用新 canvas 的上下文：
const data = rotatedCtx.getImageData(x, y, cropW, cropH);
（这里x,y是用户在旋转预览图上选定的位置，已是旋转后坐标系）
更实用的工程建议
避免手动反复算旋转矩阵，推荐两种成熟路径：
- 用现成轻量库如
image-clip（支持rotate()+clip()链式调用），它内部已封装坐标归一与矩阵反解； - 自己封装时，把“旋转状态”作为编辑器的一个属性（如
rotation: number），每次裁剪前自动构建临时 canvas 并绘制旋转图，裁剪逻辑永远只面对“当前视图”的直角坐标，不暴露底层变换细节。
不复杂但容易忽略：旋转后的图像边缘会有透明填充区，裁剪框若超出原图有效范围，getImageData 会读到透明像素——需要提前做边界校验或用 createPattern 填充背景色避免导出黑边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
