javascript - 使用点击点在 Canvas 中拉直脸部图像

Question

我正在尝试构建一个小型应用程序，用户只需点击 2 次即可将倾斜的脸部拉直

我要求用户点击图像中脸部的 Nose 中部和眉毛中部。

从那里我得到 2 分 eyebrowMiddle(x1,y1)和noseMiddle (x2,y2).

Is it possible via these 2 points to calculate how much Canvas rotation I need to have to rotate the image and make the face straight in relation to the canvas rectangle?

Also, how can I detect and adjust accordingly if the image is tilted to the left or right?

这是一个更具描述性的图片，可以向您展示我现在的意思。

<小时/>

PS:

• x1,y1和x2,y2与 Canvas 周长有关 当然，不是浏览器窗口或其他任何东西。

• 我们尝试了直线方程，例如 m = (x2-x1)/(y2-y1)，但是 结果总是接近 1，所以我认为我们没有遵循正确的方法 目前的类(class)。

• 我们不在乎图像在 Canvas 上看起来是否错误，只要 面部特征相对于 Canvas 底部平行 (他们应该直视)。

Answer 1

要执行此类旋转，您需要确定枢轴点。这里我选择眉毛。
然后，您必须在目标 Canvas 中选择一个点来 Hook 该枢轴点。我决定选择中间 x 坐标和 y 屏幕第四个位置的点。
要计算旋转 Angular ，您必须使用 atan2，它可以很好地为您提供两点之间给定 deltaY/deltaX 的 Angular (angle = Math.atan2 ( delta y , delta x ) )。

然后绘制:
- 平移到目标点。
- 旋转直 Angular 。
- 以枢轴为中心绘制图像。

瞧，它有效:-)

function rotate() {
  ctx.save();
  // go to default center position
  ctx.translate(eyeBrowTargetPosition.x, eyeBrowTargetPosition.y);
  // compute angle 
  var yDelta = noseMiddle.y - eyebrowMiddle.y;
  var xDelta =  noseMiddle.x - eyebrowMiddle.x ;
  var angle = Math.atan2 (yDelta ,xDelta);
  // compensate for angle
  ctx.rotate(angle);
  //draw image centering input on eyebrow
  ctx.drawImage(face, -eyebrowMiddle.x, -eyebrowMiddle.y);
  ctx.restore();
};

jsbin在这里:
http://jsbin.com/wavokaku/2/edit?js,output

结果与现有绿点的近似值: