Canvas javascript ImageData类型化数组读取整个像素？

因此，有很多关于如何从ImageData对象的UINT32阵列视图写入整个像素的示例。但是，不增加计数器4倍就可以读取整个像素吗？从中，写入rgba像素看起来像

var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

var buf = new ArrayBuffer(imageData.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data = new Uint32Array(buf);

for (var y = 0; y < canvasHeight; ++y) {
    for (var x = 0; x < canvasWidth; ++x) {
        var value = x * y & 0xff;

        data[y * canvasWidth + x] =
            (255   << 24) |    // alpha
            (value << 16) |    // blue
            (value <<  8) |    // green
             value;            // red
    }
}

imageData.data.set(buf8);

ctx.putImageData(imageData, 0, 0);

---

谢谢

弄明白了，我需要将缓冲区本身传递到UINT32数组构造函数，而不是另一个BufferView

var buf32 = new Uint32Array(imgd.data.buffer);
console.log(buf32.length)  // 64 yay!

---

由于视网膜显示，缓冲区长度增加了四倍，您必须写入

像素密度（1）

为了避免这种情况

谢谢，这对我也很有帮助！这比循环像素快吗谢谢，这正是我想要的。在UINT32数组上循环并比较值（无需创建散列）对于我的应用程序来说要快得多。谢谢！两种迭代方式比较不，这是因为8位用于红色，其他8位用于绿色，蓝色和字母相同。换句话说，每个像素以8x4=32位的形式存储。如果迭代uint8Array，数组中将包含x4个元素

var buf32 = new Uint32Array(imgd.data.buffer);
console.log(buf32.length)  // 64 yay!