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

Posted 2023-03-16

【中文标题】在 JavaScript 中旋转人脸 (Node.js 10)

【英文标题】：Rotate a face in 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 将被重新定义多次:)

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

【参考方案1】：

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

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