javascript ImageData typed array read whole pixel?

Question

So there is are a lot of examples on how to write an entire pixel from a Uint32Array view of the ImageData object. But is it possible to read an entire pixel without incrementing the counter 4 times? From hacks.mozilla.org, writing an rgba pixels looks like 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);

But, how can I read an entire pixel from a single offset in a 32-bit view of ImageData? Here's what I'm finding confusing, shouldn't the buf32 below have a length of 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 ?

thanks!

score 15 · Answer 1 · answered May 21 '13 at 21:03

15

figured it out, i need to pass the buffer itself into the Uint32Array constructor, not another BufferView.

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

answered May 21 '13 at 21:03

leeoniya

1,071
1
9
25

1

Thanks, this was helpful for me too! – davidtbernal Mar 16 '14 at 20:57
Is this faster than looping over pixels – Captain Jack sparrow Jun 26 '16 at 22:26
Thank you, this is exactly what I was looking for. Looping over a Uint32Array and comparing the values (without needing to create hashes) is enormously faster for my application. – Kirkman14 Oct 23 '18 at 16:58
Thanks! two ways of iterating compared http://jsfiddle.net/cancerbero_sgx/05ve439a/13/ – cancerbero Jul 02 '19 at 09:23

score -3 · Answer 2 · answered Jun 15 '19 at 12:31

-3

the buffer length is increased four times because of the retina display, you have to write pixelDensity(1); to avoid this

answered Jun 15 '19 at 12:31

44 38

1

no, it's because 8 bits is used for red, other 8 bits for green and same for blue and alphal. in other words, each pixel is stored in 8x4=32 bits. If you iterate uint8Array you will have x4 elements in the array – cancerbero Jul 02 '19 at 09:27

javascript ImageData typed array read whole pixel?

2 Answers2

Linked