在 JavaScript 中旋转人脸 (Node.js 10)答案

【问题标题】：Rotate a face in JavaScript (Node.js 10)在 JavaScript 中旋转人脸 (Node.js 10)
【发布时间】：2020-12-06 04:44:03
【问题描述】：

我正在使用人脸识别算法，但我需要旋转所有人脸以使其垂直对齐矩形。

面部矩形未旋转（其角度为 0），它包含已识别的完整面部。面部有时会旋转“faceAngle”度数，所以我实现的是一个以面部矩形的中心为轴心点（参考点）旋转它（面部）“-faceAngle”度数的函数。

Pd：人脸由 20 个地标识别。

这是面部矩形的样子：https://docs.microsoft.com/es-es/azure/cognitive-services/face/images/face.detection.jpg

这是我的代码：

  function rotateFace(face) {
      /*
        This function rotate the face to the rectangle based on the head pose attributes
      */

      // Get the face information
      const { faceRectangle, faceLandmarks, faceAttributes } = face;

      // Head pose's roll value acts directly as the face angle.
      const faceAngle = faceAttributes.headPose.roll; // In degrees

      // The pivot point will be the center of the face rectangle
      const pivotPoint = {
        x: faceRectangle.width / 2,
        y: faceRectangle.height / 2,
      };

      // Rotate each face landmark '-faceAngle' degrees
      const rotatedLandmarks = {};
      for (const [landMark, point] of Object.entries(faceLandmarks)) {
        // Rotate the point and save it in the new rotated landMarks object
        rotatedLandmarks[landMark] = rotatePoint(pivotPoint, point, -faceAngle);
      }

      // Return the rotated face
      return { ...face, faceLandmarks: rotatedLandmarks };

      function rotatePoint(pivotPoint, point, angle) {
        const { x: px, y: py } = pivotPoint;
        const { x, y } = point;

        var radians = (Math.PI / 180) * angle,
          cos = Math.cos(radians),
          sin = Math.sin(radians),
          nx = cos * (x - px) + sin * (y - py) + px,
          ny = cos * (y - py) - sin * (x - px) + py;

        return { x: nx, y: ny };
      }
  }

我遇到的问题是，有时，旋转面部的某些部分在面部矩形之外......有人知道我在算法中做错了什么吗？或者任何想法如何让这更容易？

我认为支点不应该是我选择的那个，但它对我的想法很有意义......

谢谢。

示例

为了这张照片https://scstylecaster.files.wordpress.com/2017/03/emma-watson-1.jpg

我得到这个脸矩形：

faceRectangle: {
   top: 90,
   left: 309,
   width: 510,
   height: 510 
}

因此，相对于矩形的面部标志应该在 X 轴的 [0, 510] 范围内，Y 轴的范围 [0, 510] 内

但我得到的是：

{
  "eyebrowRightInner": { "x": 257.16357408506883, "y": 37.89185642687593 },
  "underLipTop": { "y": 306.6951578378977, "x": 326.5280833858301 },
  "mouthRight": { "x": 413.55677612276986, "y": 257.5870460792551 },
  "eyebrowLeftInner": { "y": 67.10580836435113, "x": 168.71276847994784 },
  "noseTip": { "y": 206.5354065431846, "x": 289.9445594907593 },
  "noseRootLeft": { "y": 112.52684633627678, "x": 204.9452029765821 },
  "noseRightAlarTop": { "x": 311.41755898744964, "y": 159.77912041377596 },
  "pupilRight": { "x": 315.13546073674706, "y": 48.933158797745136 },
  "pupilLeft": { "x": 106.47397872844112, "y": 137.8818851860268 },
  "upperLipTop": { "y": 280.73055222306243, "x": 312.3126250651826 },
  "eyeRightOuter": { "y": 37.448988851675836, "x": 371.07188751438275 },
  "eyebrowRightOuter": { "y": -16.27549040986449, "x": 413.1946880869507 }, // <------------------ error
  "eyeLeftOuter": { "y": 154.79417336302782, "x": 82.3579154382175 },
  "upperLipBottom": { "y": 302.33231999033967, "x": 324.86506026034 },
  "noseLeftAlarOutTip": { "y": 244.55778079547065, "x": 220.11663487446322 },
  "noseLeftAlarTop": { "x": 220.08119281608163, "y": 200.35236547267908 },
  "eyeLeftBottom": { "y": 154.39022448200217, "x": 120.07378511268632 },
  "noseRightAlarOutTip": { "x": 350.8688839396136, "y": 182.97767553082463 },
  "eyebrowLeftOuter": { "x": 12.151092571862137, "y": 146.8442033623165 },
  "eyeRightBottom": { "x": 337.62439624997774, "y": 64.52859978162735 },
  "eyeLeftTop": { "y": 124.33543005444903, "x": 103.84081459224478 },
  "underLipBottom": { "y": 332.64619899450827, "x": 341.8614934073455 },
  "noseRootRight": { "y": 86.3352712525471, "x": 268.4137100854889 },
  "eyeLeftInner": { "x": 154.06657444677165, "y": 128.0195917006581 },
  "eyeRightInner": { "x": 294.24199118290403, "y": 71.94256839474764 },
  "eyeRightTop": { "x": 320.5652039630463, "y": 34.94002160494745 },
  "mouthLeft": { "y": 346.12770549550777, "x": 220.09672435462016 }
}

【问题讨论】：

您能否提供一张图片，其中有“有时，旋转的某些部分在矩形之外”的示例。我们在说什么，几个像素还是很多？请提供输入值和示例输出，然后有人可以更轻松地帮助您。
我好像在倒脸……
所以，如果我只调用一次rotateFace，在里面我调用rotatePoint 20 次，函数“rotatePoint”将被重新定义20 次？？！！好的，我将尝试重现一个示例。
没有。如果有人会多次调用您的 rotateFace 函数（例如在多个图像上，例如 1.000.000 个图像），那么 rotatePoint 将被重新定义多次:)
我发现了错误......这是地标是相对于图像而不是相对于矩形，所以我必须在旋转之前更改它们，因为枢轴点是相对的 -到矩形。

标签： javascript node.js algorithm math face-recognition

【解决方案1】：

我发现了错误...这是地标是相对于图像而不是相对于矩形，因此我必须在旋转之前更改它们，因为枢轴点是相对于矩形的。

只需确保在旋转之前获得每个地标相对于矩形的位置。其他解决方案是采用矩形的中心，但相对于图像而不是相对于矩形，并使用原始（相对于图像）地标。

【讨论】：