javascript - 使用 Canvas 旋转坐标(面部地标)，原点位于左上角

Question

我正在使用 Google 的 Cloud Vision API 来检测人脸和其中的地标(例如眼睛、 Nose 等)。

如果脸部旋转，我想纠正旋转，以便脸部及其地标垂直放置在 canvas 元素内。

Google 提供地标的坐标，其原点位于左上角，以及以度为单位的滚动、倾斜 和平移 属性:

"landmarks": [
        {
          "position": {
            "x": 371.52585,
            "y": 437.1983,
            "z": 0.0012220144
          },
          "type": "LEFT_EYE"
        },
        ...
        "panAngle": -2.0305812,
        "rollAngle": 26.898327,
        "tiltAngle": -2.6251676,
        ...

我可以通过使用 ctx.rotate( Degrees*Math.PI/180) 将 rollAngle 属性转换为弧度来纠正图像的旋转，但是我该如何做旋转坐标以便它们与旋转后的图像匹配？

我的目标是使图像和相应的坐标如下:

干杯

Answer 1

我不想为此向 API 发送两个网络请求。解决方案是分别旋转 Canvas 和坐标。首先，我使用 Cloud Vision API 提供的 rollAngle 在其中心旋转 Canvas 。

function rotateCanvas(canvas, image) {

    let ctx = canvas.getContext('2d');
    let rollAngle = sampleResponse.faceAnnotations[0].rollAngle; // rotation of face provided by the Cloud Vision API

    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.translate(
        canvas.width / 2,
        canvas.height / 2);
    ctx.rotate(Math.PI / 180 * -rollAngle);
    ctx.translate(
        -(canvas.width / 2),
        -(canvas.height / 2));
    ctx.drawImage(
        image,
        canvas.width / 2 - canvas.width / 2,
        canvas.height / 2 - canvas.height / 2,
        canvas.width,
        canvas.height);
    ctx.restore();

    return canvas;

}

接下来我用了this answer循环遍历 Cloud Vision API 提供的每个地标并按给定的 rollAngle 旋转它:

function rotateCoordinate(cx, cy, x, y, angle) {

    // rotate the landmarks provided by the cloud vision API if the face in the supplied
    // image isn't vertically aligned

    var radians = (Math.PI / 180) * angle,
        cos = Math.cos(radians),
        sin = Math.sin(radians),
        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
    return [nx, ny];
}

与 Canvas 旋转一样，我从中心旋转所有内容。

function rotateLandmarks(canvas, landmarks) {

    let rollAngle = sampleResponse.faceAnnotations[0].rollAngle;

    for (let i = 0; i < landmarks.length; i++) {

        let rotated = this.rotateCoordinate(
            canvas.width / 2,
            canvas.height / 2,
            landmarks[i].position.x,
            landmarks[i].position.y,
            rollAngle)

        landmarks[i].position.x = rotated[0];
        landmarks[i].position.y = rotated[1];

    }

    return landmarks;

}