CODEWITHSUNDEEP
javascripthtmlrgb
Skodsgn
Skodsgn

Reputation: 981

Convert 3bytes RGB to 2bytes in javascript

How to convert 3bytes RGB to 2bytes RGB in javascript?

for example i need to do that:

enter image description here

i tried this:

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
    }
}

But when i do this:

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"}

i lost 00 in b1 at lowest bites.

How to fix that?

EDIT

Solution by @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
        }
    }

But next problem is , how to save this converted pixels into 8 bit array?

        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))

When i do this i got [0, 73]. How to save string '1010101' as bits? Do i need to convert it into number?

Upvotes: 0

Views: 80

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

you are incorrectly assuming toString(2) always outputs 8 characters - clearly it wont (5..toString(2) only outputs 101 for example

instead of

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

do

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

this (left) pads all values to (at least) 8 characters, the substr(-8) gets just the last 8 characters

or create a function (padit in the example) to remove the repetition

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
    }
}

An alternative ...

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));

or in the alternative version of shortPixel use r+g1 and g2+b directly as they are integers

Upvotes: 2

Related Questions