javascript ImageData类型数组读取整个像素?

时间:2013-05-21 20:43:31

标签: canvas pixel typed-arrays

因此,有很多关于如何从ImageData对象的Uint32Array视图中整个像素的示例。但是有可能在不增加计数器4次的情况下读取整个像素吗?从hacks.mozilla.org开始,写一个rgba像素看起来像 this

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);

但是,如何从ImageData的32位视图中的单个偏移读取整个像素?这是我发现令人困惑的事情,下面的buf32不应该有256/4 = 64的长度吗?

// 8x8 image
var imgd = ctx.getImageData(0, 0, canvasWidth, canvasHeight),
    buf32 = new Uint32Array(imgd.data);

console.log(imgd.data.length);  // 256
console.log(buf32.length);      // 256  shouldn't this be 256/4 ?

谢谢!

2 个答案:

答案 0 :(得分:11)

想通了,我需要将缓冲区本身传递给Uint32Array构造函数,而不是另一个BufferView。

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

答案 1 :(得分:-1)

由于视网膜显示,缓冲区长度增加了四倍,您必须写pixelDensity(1);来避免这种情况