、バイトの配列でバイト

Question

になど[40, 0, 156, 243]を最後の2ビットを取得するにはどのように、私は、配列の各バイトの最後の2ビットから1つのバイトをする必要があります。これは、プログラムデータをPNGイメージに格納するPICO-8カートリッジ（see here）をデコードしてエンコードするためのものです。ここで私は、データが格納されている方法に与えられてきたという情報がある：

For png files, the lower 2 bits of each pixel component makes up one byte, so 1 byte per pixel. The last 32 bytes are metadata for the PNG (since 160*205 = 0x8020, 32 extra bytes) byte = (a << 6) | (r << 4) | (g << 2) | b;

は、ここで私がこれまで持っているものだが、出力はすべてのちんぷんかんぷんです：

var imgWidth = 160; 
var imgHeight = 205; 
var canvas = document.createElement('canvas'); 
var ctx  = canvas.getContext('2d'); 
var img  = document.createElement('img'); 

img.src = 'Invasion.png'; 

canvas.width = imgWidth; 
canvas.height = imgHeight; 

img.onload = function() { 
    var imgData = []; 
    var str  = ''; 
    var i = 0, n = 0, dataLen = 0; 

    ctx.drawImage(img, 0, 0); 

    imgData = ctx.getImageData(0, 0, imgWidth, imgHeight).data; 
    dataLen = imgData.length; 

    for(i; i < dataLen; i+=4) { 
    var r = imgData[i]; 
    var g = imgData[i + 1]; 
    var b = imgData[i + 2]; 
    var a = imgData[i + 3]; 

    r = (r & 3) << 4; 
    g = (g & 3) << 2; 
    b = (b & 3); 
    a = (a & 3) << 6; 

    byte = a | r | g | b; // assembled byte 

    str += String.fromCharCode(byte); 
    } 

    console.log(str); 
}; 

フィドル：https://jsfiddle.net/24o3fzg3/

が大幅に、感謝をこの上の任意の助けに感謝します！

Answer 1

最後の2ビットを取得するには、むしろvalue % 100よりvalue & 3を試してみてください。 （value % 100は、valueの残りの部分をバイナリではなく10進数で100で割った値になります）。次に、これら2つのビットを最終バイトの適切な位置にシフトする必要があります。このような何か：

r = (pixels[n][0] & 3) << 4; 
    g = (pixels[n][1] & 3) << 2; 
    b = (pixels[n][2] & 3); 
    a = (pixels[n][3] & 3) << 6; 

    val = a | r | g | b; // assembled byte 

（私は、これが組み立てられた値または正しい画素配列順にビットに対する正しい順序であるかどうかをアドレッシングないよ）

Answer 2

私はJS男ではありませんよしかし、私はコードがこのようなものでなければならないと思う：

... 
r = (pixels[n][0] & 3); 
g = (pixels[n][1] & 3); 
b = (pixels[n][2] & 3); 
a = (pixels[n][3] & 3); 
byte = (a << 6) | (r << 4) | (g << 2) | b; 
str += String.fromCharCode(byte); 
...