使用画布在左上角旋转坐标（面部地标）答案

【问题标题】：Rotating coordinates (face landmarks) with origin at top left using canvas使用画布在左上角旋转坐标（面部地标）
【发布时间】：2022-06-15 01:53:42
【问题描述】：

我正在使用 Google 的 Cloud Vision API 来检测人脸和其中的地标（如眼睛、鼻子等）。

如果面部被旋转，我想纠正旋转，使面部及其地标垂直定位在 canvas 元素内。

Google 提供地标的坐标，其原点位于左上角，roll、tilt 和 pan 属性以度为单位：

"landmarks": [
        {
          "position": {
            "x": 371.52585,
            "y": 437.1983,
            "z": 0.0012220144
          },
          "type": "LEFT_EYE"
        },
        ...

我可以通过使用ctx.rotate(degrees*Math.PI/180) 将roll 属性转换为弧度来校正图像的旋转，但是如何旋转坐标以使其与旋转后的图像匹配？

我的目标是让图片和对应的坐标如下：

干杯

【问题讨论】：

标签： javascript canvas computer-vision face-recognition google-cloud-vision

【解决方案1】：

我可以看到两种方式：

确定基本图像旋转，将其旋转到直立位置，然后再次确定面部标志；或
使用数学：

x1 = x0 * cos(滚动) y1 = y0 * sin(滚动)

【讨论】：