4、前端裁剪实现：Canvas API详解、drawImage方法、裁剪框交互设计

前端裁剪，说白了就是让用户在浏览器里「框选」图片的一部分，然后把这部分拿出来用。这个功能在头像上传、证件照编辑、商品图处理里太常见了。我最早做这个功能时，以为就是画个框、截个图那么简单，结果踩了不少坑——坐标算不对、图片模糊、旋转后位置跑偏……嗯，今天咱们就把这些事彻底聊透。

4.1 Canvas API 核心基础

Canvas 是前端裁剪的基石。你想想看，所有像素操作、坐标变换、图像输出，都得靠它。我个人习惯把 Canvas 理解成「一块画布 + 一支画笔」——画布是 <canvas> 元素，画笔是 getContext('2d') 拿到的上下文对象。

4.1.1 坐标系与变换矩阵

Canvas 的坐标系默认原点在左上角，X 轴向右，Y 轴向下。但裁剪时经常需要旋转、平移、缩放，这时候就要用到变换矩阵了。

为什么会这样？因为 Canvas 的变换是累加的。你调一次 rotate，后续所有绘制都会受影响。所以我的习惯是：每次变换前先 save()，操作完立刻 restore()，避免状态污染。

4.1.2 像素操作与图像数据

除了绘制，Canvas 还能直接读写像素。用 getImageData() 可以拿到每个像素的 RGBA 值，用 putImageData() 可以写回去。这在做滤镜、颜色调整时很有用，但裁剪场景下用得不多——因为 drawImage 已经够用了。

4.2 drawImage 方法详解

drawImage 是裁剪系统的核心方法。它有三种调用形式，我列个表给你看：

形式	参数	用途
drawImage(img, dx, dy)	图片、目标 X、目标 Y	简单绘制，不缩放
drawImage(img, dx, dy, dw, dh)	图片、目标 X、Y、宽、高	缩放绘制
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)	源裁剪区 + 目标绘制区	裁剪核心

第三种形式才是裁剪的关键。参数 sx, sy, sw, sh 定义了源图上的矩形区域，dx, dy, dw, dh 定义了目标 Canvas 上的绘制区域。说白了，就是「从源图切一块，贴到目标画布上，还能顺便缩放」。

4.2.1 实际裁剪代码示例

假设用户选了一个裁剪框，左上角在 (100, 50)，宽 300，高 200。我们要把这块区域截出来，输出成 600x400 的图片（放大一倍）。

function cropImage(sourceImg, cropRect, outputWidth, outputHeight) {
  // 创建输出 Canvas
  const canvas = document.createElement('canvas');
  canvas.width = outputWidth;
  canvas.height = outputHeight;
  const ctx = canvas.getContext('2d');

  // 从源图裁剪并缩放
  ctx.drawImage(
    sourceImg,
    cropRect.x, cropRect.y,          // sx, sy
    cropRect.width, cropRect.height,  // sw, sh
    0, 0,                             // dx, dy
    outputWidth, outputHeight         // dw, dh
  );

  return canvas.toDataURL('image/png');
}

这段代码看起来简单，但实际项目中要考虑的事情多得多——比如裁剪框坐标是相对于显示层的，而源图可能被缩放过，需要做坐标换算。这个我们后面会讲。

4.3 裁剪框交互设计

裁剪框的交互是用户最直接的操作体验。拖拽、缩放、旋转，这三个动作看似独立，其实互相影响。我最早做的时候，把三个逻辑写在一起，结果改一个 bug 引出三个新 bug……后来学乖了，用状态机来管理。

4.3.1 拖拽实现

拖拽的核心逻辑就三步：

1. 鼠标按下：记录起始位置和裁剪框当前位置
2. 鼠标移动：计算偏移量，更新裁剪框位置
3. 鼠标松开：结束拖拽，触发裁剪预览

代码实现大致是这样：

let isDragging = false;
let startX, startY;
let initialRect;

canvas.addEventListener('mousedown', (e) => {
  if (isInsideCropRect(e.offsetX, e.offsetY)) {
    isDragging = true;
    startX = e.offsetX;
    startY = e.offsetY;
    initialRect = { ...cropRect };
  }
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.offsetX - startX;
  const dy = e.offsetY - startY;
  cropRect.x = initialRect.x + dx;
  cropRect.y = initialRect.y + dy;
  redrawCanvas();
});

canvas.addEventListener('mouseup', () => {
  isDragging = false;
});

4.3.2 缩放实现

缩放比拖拽复杂一点。用户通常拖拽裁剪框的八个控制点（四角 + 四边中点）来缩放。每个控制点对应的变换逻辑不同：

控制点	变换逻辑
左上角	同时改变 x、y、width、height
右上角	改变 y、width、height，x 不变
左下角	改变 x、width、height，y 不变
右下角	改变 width、height，x、y 不变
上边中点	改变 y、height
下边中点	改变 height
左边中点	改变 x、width
右边中点	改变 width

这里有个细节：缩放时要保持最小尺寸限制，不能让用户把裁剪框缩到 0 甚至负数。我一般设最小 20x20 像素。

4.3.3 旋转实现

旋转是最容易出问题的。因为旋转后，裁剪框的坐标、宽高都不再是简单的矩形了——它变成了一个旋转后的矩形，四个角点坐标都变了。

我的做法是：

1. 用 ctx.save() 保存状态
2. 把原点平移到裁剪框中心
3. 调用 ctx.rotate(angle)
4. 绘制裁剪框和图片
5. 用 ctx.restore() 恢复

但要注意，旋转后鼠标事件的坐标也要做相应的逆变换，否则用户拖拽控制点时，鼠标位置和实际控制点位置对不上。

4.4 知识体系总览

下面这张 SVG 图把本章的核心知识点串起来了，你可以对照着回顾：

4.5 综合实践建议

最后，我分享几个实战中总结的经验：

• 状态管理要独立：裁剪框的位置、大小、旋转角度，最好放在一个独立对象里管理，不要散落在各个事件处理函数中。
• 坐标换算不能省：如果图片在显示时被缩放了，裁剪框的坐标必须除以缩放比，才能得到源图上的真实坐标。
• 性能优化：拖拽和缩放过程中，不要每次都用 drawImage 去重新裁剪原图。先画一个低分辨率的预览图，等用户松开鼠标后再做高精度裁剪。
• 边界约束：裁剪框不能超出图片边界。我习惯在每次更新裁剪框后，做一次 clamp 操作，把坐标限制在图片范围内。