遍歷HTML5 canvas getImageData時獲取X和Y像素坐標

Question

我正在遍歷從canvas提取的一些圖像數據，如下所示：

var imageData = this.context.getImageData(0, 0, this.el.width, this.el.height);
var data = imageData.data;

for (var i = data.length; i >= 0; i -= 4) {
    if (data[i + 3] > 0) {
        data[i] = this.colour.R;
        data[i + 1] = this.colour.G;
        data[i + 2] = this.colour.B;
    }
}

如何計算當前所在的X和Y像素坐標？

Answer 1

更正和測試的代碼版本：

var x = (i / 4) % this.el.width;
var y = Math.floor((i / 4) / this.el.width);

Answer 2

一個簡單的算術序列：

將線性位置除以寬度。 那就是你的Y坐標。 將Y坐標乘以寬度，然后從線性位置減去該值。 結果是X坐標。

另請注意，由於線性位置是RGBA，因此必須將其除以4。