在 JavaScript 中旋转一张脸 (Node.js 10)

Question

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

人脸矩形未旋转（角度为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 }
}

Answer 1

我发现了错误...是地标是 relative-to-image 而不是相对的 -to-rectangle，所以我不得不在旋转之前更改它们，因为轴心点是相对的-to-rectangle.

只需确保在旋转之前获得每个地标相对于矩形的位置。其他解决方案是取矩形的中心，但 relative-to-image 而不是 relative-to-rectangle，并使用原始 (relative-to-image) 地标。

在 JavaScript 中旋转一张脸 (Node.js 10)

Rotate a face in JavaScript (Node.js 10)

javascript

algorithm

math

face-recognition

node.js

例子