javascript - 遍历 HTML5 画布 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 坐标。

另请注意，您必须将线性位置除以 4，因为它是 RGBA。

Answer 3

解决方案

    let frame = ctx.getImageData(0, 0, c.width, c.height);
    let data = frame.data;

    let y = 0;
    let x = 0;
    for (let i = 0; i < data.length; i += 4) {
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
      const alpha = data[i + 3];
      x = (i / 4) % c.width;
      y = ~~(i / 4 / c.width);
    }