javascript ImageData类型数组读取整个像素? [英] javascript ImageData typed array read whole pixel?
问题描述
因此,有很多关于如何从ImageData对象的Uint32Array视图中写入整个像素的例子。但是是否可以读取整个像素而不增加计数器4次?从 hacks.mozilla.org ,编写rgba像素看起来像 this
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);
但是,如何从ImageData的32位视图中的单个偏移读取整个像素?这里是我发现混乱,下面的 buf32
长度为256/4 = 64?
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 ?
谢谢!
推荐答案
想出来,我需要将缓冲区本身传递给Uint32Array构造函数,而不是另一个BufferView。
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!
这篇关于javascript ImageData类型数组读取整个像素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!