canvas旋转校正人脸图像时如何匹配对应关键点坐标

核心原则：图像旋转和关键点坐标变换必须使用完全一致的旋转中心、旋转角度和变换逻辑，二者才能精准对齐。

核心问题原因 #

单独旋转图像时，如果没有基于同一个基准点做同规则的坐标变换，自然会出现关键点和图像错位。不需要单独给关键点写一套独立的旋转逻辑，直接复用canvas的坐标系变换能力就能零成本对齐。

具体实现步骤 #

1. 选定统一旋转基准点 #

不要使用canvas默认左上角(0,0)作为旋转中心，否则旋转后图像会偏移出可视区域。直接取检测返回的人脸包围盒中心点作为旋转原点：

• 从Google Vision返回结果的boundingPoly字段取人脸四个顶点坐标
• 四个顶点x、y坐标分别取平均值，得到中心点(centerX, centerY)，该点旋转前后位置固定，是对齐的基准。

2. 统一通过canvas坐标系变换完成对齐 #

在绘制图像、绘制关键点之前，先按顺序设置canvas的变换矩阵，之后所有绘制操作都会自动应用旋转效果，不需要手动计算任何坐标：

// 转正需要反向旋转roll角度，做弧度制转换
const rotateRad = -rollAngle * Math.PI / 180;

// 重置canvas状态，避免之前的变换残留
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 按顺序应用变换：平移原点到旋转中心 -> 旋转 -> 平移回原坐标基准
ctx.translate(centerX, centerY);
ctx.rotate(rotateRad);
ctx.translate(-centerX, -centerY);

// 直接用原始坐标绘制，自动对齐
ctx.drawImage(sourceImg, 0, 0);
// 绘制关键点
landmarks.forEach(item => {
  const {x, y} = item.position;
  ctx.beginPath();
  ctx.arc(x, y, 4, 0, Math.PI * 2);
  ctx.fillStyle = '#ff0000';
  ctx.fill();
});

3. 需单独获取旋转后关键点坐标的场景 #

如果你需要在canvas外使用校正后的关键点坐标，直接用和canvas变换完全一致的二维旋转公式计算即可：

/**
 * 计算点绕指定中心旋转后的坐标
 * @param {number} x 原始点x
 * @param {number} y 原始点y
 * @param {number} cx 旋转中心x
 * @param {number} cy 旋转中心y
 * @param {number} rad 旋转弧度（转正用负的roll角度对应弧度）
 */
function calcRotatedCoord(x, y, cx, cy, rad) {
  const cosVal = Math.cos(rad);
  const sinVal = Math.sin(rad);
  // 转换为以旋转中心为原点的相对坐标
  const relX = x - cx;
  const relY = y - cy;
  // 应用旋转矩阵
  const rotX = relX * cosVal - relY * sinVal;
  const rotY = relX * sinVal + relY * cosVal;
  // 转换回原坐标系
  return {x: rotX + cx, y: rotY + cy};
}

补充说明 #

• tiltAngle（俯仰）和panAngle（左右转头）属于3D姿态参数，2D平面校正只需要处理rollAngle（平面内滚转角）即可达到正向垂直的展示效果，不需要额外处理这两个参数。
• 旋转后如果图像出现裁切，提前计算旋转后图像的外接矩形尺寸，对应调整canvas宽高和初始平移量即可完整展示所有内容。

内容的提问来源于stack exchange，提问作者dave