平移和旋轉后 canvas 上的 getImageData

Question

我正在嘗試通過 getImageData function 為 canvas 提取圖像的一部分。

困難在於我的部分是旋轉的。 我的目標是提取例如圖像上的矩形：

為了繪制下面的矩形，我使用了平移和旋轉，但是當我們使用 getImageData 時這些函數不起作用。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img = new Image();
img.onload = function () {
    ctx.drawImage(img, 0, 0, img.width, img.height);
drawRect();
}
img.src = "https://dummyimage.com/300x150/5873f0/ffffff.jpg"; 


function drawRect(){
    ctx.save();
    ctx.translate(75, 100);
    ctx.rotate(20 * Math.PI / 180)
    // imgData = ctx.getImageData(-50, -25, 100, 50);
    ctx.strokeStyle = 'black';
    ctx.strokeRect(-50, -25, 100, 50);
    ctx.restore()
}

這是我使用的小提琴。 謝謝！