图像到HTML5中的2d数组

Question

我想知道如何在HTML5画布上将图像（PNG）转换为Javascript中的二维颜色的2D数组。通过context.getImageData（）函数。附：如果alpha为0，那么你可以将十六进制颜色设置为“0”。

谢谢。

Answer 1

转换为32位数组的单词，通过屏蔽alpha并检查是否为零来检查alpha零，然后将hex设置为零，否则屏蔽alpha并使用＆＃34;＃＆添加十六进制颜色格式＃34;一开始。

const d32 = new Uint32Array(ctx.getImageData(0,0,ctx.canvas.width,ctx.canvas.height).data.buffer);
const hexArray = [];
var i = 0;
while(i < data32.length){
    const data = ((d32[i] & 0xFF) << 16) + (d32[i] & 0xFF00) + ((d32[i] & 0xFF0000) >> 16);  
    hexArray.push(
        d32[i++] & 0xFF000000 ?
        "#" + (data | 0x1000000).toString(16).substr(1) :
        "0"
    );
}