JavaScript - RGBA 数组转二进制答案

【问题标题】：JavaScript - RGBA array to binaryJavaScript - RGBA 数组转二进制
【发布时间】：2021-11-04 06:02:16
【问题描述】：

给定一个字节数组，它只能包含值255 或0，表示RGBA 中的黑白图像，例如：[255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255]。

如何将其转换为字节数组，其中每个位代表 1 个像素？上面的数组是10111111 -> [191]

【问题讨论】：

这个数组有多长？迭代地循环它会不会太低效？
到目前为止，您尝试了哪些方法来自行解决此问题？ -> How much research effort is expected of Stack Overflow users?
@AlphaHowl 数组可能很长，但循环没问题。

标签： javascript arrays binary rgba

【解决方案1】：

既然你说循环没问题，我就用了下面的方法：

收集原始数组的每 4 个元素。这是[R,G,B,A]；
检查是否为黑色，否则为白色。黑色是0，白色是1。
最终从 base-2（二进制）转换为 base-10（二进制）。
然后提醒用户

检查这个sn-p：

const RGBA_array = [255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255];
const byte_array = [];
for(let i = 0; i < RGBA_array.length; i+=4) {
    let color = 1;
    const current_nibble = [RGBA_array[i], RGBA_array[i+1], RGBA_array[i+2], RGBA_array[i+3]];
    if(!current_nibble[3]) color = 0;
    if(!(current_nibble[0]&&current_nibble[1]&&current_nibble[2])) color = 0;
    byte_array.push(color);
};
const base_10_number = parseInt(byte_array.join(""), 2);
document.write("Here is your bitmap as a base-10 number: <b>" + base_10_number + "</b>");

【讨论】：

【解决方案2】：

位移相当简单，就像这样。

const arr = [255, 255, 255, 255, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255];

let colorMask = 0;
for (let i = 0; i < arr.length; i+=4) {
    if (arr[i] !== 0) {
        colorMask |= 1 << (i / 4);
    }
}

所以每四个字节检查它们是否非零，如果不是，则 colorMask 中的位置设置为一。请注意，colorMask 不会表示预期的 191 整数，而是 253，因为数字和整数的二进制表示不同。

如果您需要十进制表示，则必须将每一位都与字符串相结合，如下所示：

let rep = "";
for (let i = 0; i < 8; i++) {
    rep += ((colorMask & (1 << i)) ? 1 : 0);
}

console.log(parseInt(rep, 2), rep);

【讨论】：