您应该直接使用类型化数组而不是 javascript 数组进行主要计算,因此您以后不必转换:
var myArray = new Uint8Array(pixelCount);
或者
var myArray = new Uint8ClampedArray(pixelCount);
访问权限与标准 js 数组相同:
for (var pxIndex = 0; pxIndex<myArray.length; pxIndex+=4 ) {
// component for the (pxIndex >>2)th pixel :
var r = myArray[pxIndex ];
var g = myArray[pxIndex+1];
var b = myArray[pxIndex+2];
var a = myArray[pxIndex+3];
}
这样你只需要复制这个数组来更新屏幕:
ctx.putImageData(my_array,0,0);
请注意,您可以检索此数组的缓冲区,并对该数组有另一个视图。
这样,您还可以拥有一个 32 位视图,一次执行 4 个字节的复制操作。
var sourceBuffer32 = new UInt32Array(myArray.buffer);
如果您使用的是 32 位视图,请记住每个系统的字节序可能不同,这会导致在阵列中加载 ABGR(PC / mac)或 RGBA。这对副本没有任何改变,但在某些情况下可能会令人讨厌(:-))。
不要忘记,您还可以使用 ArrayBuffer 切片函数复制数组缓冲区:
var myArrayCopy = new new Uint8ClampedArray(myArray.buffer.slice(0));
你可以通过这个小函数知道字节顺序:
function isLittleEndian() {
// from TooTallNate / endianness.js. https://gist.github.com/TooTallNate/4750953
var b = new ArrayBuffer(4);
var a = new Uint32Array(b);
var c = new Uint8Array(b);
a[0] = 0xdeadbeef;
if (c[0] == 0xef) { isLittleEndian = function() {return true }; return true; }
if (c[0] == 0xde) { isLittleEndian = function() {return false }; return false; }
throw new Error('unknown endianness');
}
您可以使用以下命令反转 32 位(ABCD -> DCBA):
function reverseUint32 (uint32) {
var s32 = new Uint32Array(4);
var s8 = new Uint8Array(s32.buffer);
var t32 = new Uint32Array(4);
var t8 = new Uint8Array(t32.buffer);
reverseUint32 = function (x) {
s32[0] = x;
t8[0] = s8[3];
t8[1] = s8[2];
t8[2] = s8[1];
t8[3] = s8[0];
return t32[0];
}
return reverseUint32(uint32);
};