如何获得一个字节的最后2位(How to get the last 2 bits in a byte)

 在一个字节数组中，例如[40, 0, 156, 243] ，我需要从数组的每个字节的最后两位中取出1个字节。 这是解码和编码PICO-8盒式磁带（ 见这里 ），它将程序数据存储在PNG图像中。 以下是关于数据存储方式的信息： 
 
 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/ 
 
 非常感谢任何帮助，谢谢！ 

In an array of bytes, such as [40, 0, 156, 243], I need to make 1 byte from the last two bits in each byte of the array. This is for decoding and encoding PICO-8 cartridges (see here), which stores the program data in PNG images. Here is the information that I've been given on how the data is stored:
 
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;
 
Here's what I have so far, but the output is all gibberish:
 
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);
};
 
Fiddle: https://jsfiddle.net/24o3fzg3/
 
Greatly appreciate any help on this, thanks!

原文：https://stackoverflow.com/questions/39666716