所以有很多关于如何的例子writeImageData 对象的 Uint32Array 视图中的整个像素。但是是否可以在不将计数器增加 4 倍的情况下读取整个像素呢?从hacks.mozilla.org https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/,写一个 rgba 像素看起来像this http://jsfiddle.net/andrewjbaker/GhwUC/.
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 ?
thanks!
想通了,我需要将缓冲区本身传递到 Uint32Array 构造函数中,而不是另一个 BufferView 中。
var buf32 = new Uint32Array(imgd.data.buffer);
console.log(buf32.length) // 64 yay!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)