在 javascript 中将 3 个字节的 RGB 转换为 2 个字节

Question

如何在 javascript 中将 3 字节 RGB 转换为 2 字节 RGB？

例如我需要这样做：

我试过这个：

function shortPixel(pixel){
    var r = pixel.r.toString(2).slice(0,5);
    var g1 = pixel.g.toString(2).slice(0,3);
    var g2 = pixel.g.toString(2).slice(3,6);
    var b = pixel.b.toString(2).slice(0,5);
    console.log(r+" "+g1+"|"+g2+" "+b);
    console.log(r+g1);
    console.log(g2+b);
    return{
        b1: r+g1,
        b2: g2+b
    }
}

但是当我这样做时：

app.shortPixel({r:255,g:0,b:255});
2015-08-26 15:47:32.939 scripts.js:417 11111 0| 11111
2015-08-26 15:47:32.939 scripts.js:418 111110
2015-08-26 15:47:32.940 scripts.js:419 11111
Object {b1: "111110", b2: "11111"}

我在 b1 中以最低位输了 00。

如何解决？

编辑

@Jaromanda X 的解决方案

function shortPixel(pixel){
        var padit = function(n) {
            return ('0000000' + n.toString(2)).substr(-8);
        }
        var r = padit(pixel.r).slice(0,5);
        var g1 = padit(pixel.g).slice(0,3);
        var g2 = padit(pixel.g).slice(3,6);
        var b = padit(pixel.b).slice(0,5);           
        return{
            b1: b+g1,
            b2: g2+r
        }
    }

但下一个问题是，如何将转换后的像素保存为8位数组？

        var buffer = new ArrayBuffer(2);
        var data = new DataView(buffer);
        data.setUint8(0,r+g1);
        data.setUint8(1,g2+r);
        console.log(new Uint8Array(buffer))

当我这样做时，我得到了 [0, 73]。如何将字符串 '1010101' 保存为位？我需要把它转换成数字吗？

Answer 1

你错误地假设 toString(2) 总是输出 8 个字符——显然它不会（例如 5..toString(2) 只输出 101

而不是

pixel.r.toString(2).slice(0,5);

做

('0000000' + pixel.r.toString(2)).substr(-8).slice(0,5);

这个（左）将所有值填充到（至少）8 个字符，substr(-8) 只得到最后 8 个字符

或创建一个函数（示例中的 padit）来删除重复

function shortPixel(pixel){
    var padit = function(n) {
        return ('0000000' + n.toString(2)).substr(-8);
    }
    var r = padit(pixel.r).slice(0,5);
    var g1 = padit(pixel.g).slice(0,3);
    var g2 = padit(pixel.g).slice(3,6);
    var b = padit(pixel.b).slice(0,5);
    console.log(r+" "+g1+"|"+g2+" "+b);
    console.log(r+g1);
    console.log(g2+b);

    return{
        b1: r+g1,
        b2: g2+b
    }
}

另一种选择...

function shortPixel(pixel){
    var padit = function(n) {
        return ('0000000' + n.toString(2)).substr(-8);
    }
    var r = (pixel.r >> 3) << 3;
    var g1 = pixel.g >> 5;
    var g2 = ((pixel.g >> 2) & 7) << 5;
    var b = pixel.b >> 3;
    return{
        b1: padit(r+g1),
        b2: padit(g2+b)
    }
}

How to save string '1010101' as bits? Do i need to convert it into number?

data.setUint8(0,parseInt(r+g1, 2));

或者在 shortPixel 的替代版本中直接使用 r+g1 和 g2+b，因为它们是整数

在 javascript 中将 3 个字节的 RGB 转换为 2 个字节

Convert 3bytes RGB to 2bytes in javascript

html

javascript

rgb