Stimmt dies?

Hallo, das Format ist eigentlich ganz gut beschrieben … Ich habe dir hier mal einen De-/Encoder in JS geschrieben, den du zum Beispiel mit https://jsfiddle.net/ (in das JavaScript-Feld eintragen) ausführen kannst …

Das Ergebnis sieht dann so aus, wie im Beispiel:

Code:

function getImage(binaryData) {
  const width = 150;
  const height = 150;
  const cellSize = 30;


  // create canvas
  let canvas = document.createElement("canvas"),
    context = canvas.getContext("2d"),
    imgData = context.createImageData(width, height);


  canvas.height = height;
  canvas.width = width;


  let width2, height2, blockSize, colorDepth;
  let colors = [];
  let pixels = [];
  for (let i = 0; i < binaryData.length; ) {
    if (i == 0) {
      width2 = parseInt(binaryData.substring(i, i + 8), 2);
      height2 = parseInt(binaryData.substring(i + 8, i + 16), 2);
      blockSize = parseInt(binaryData.substring(i + 16, i + 24), 2);
      colorDepth = parseInt(binaryData.substring(i + 24, i + 32), 2);
      i += 32;
    }
    if (i >= 32 && i < Math.pow(2, colorDepth) * 24 + 32) {
      let r = parseInt(binaryData.substring(i, i + 8), 2);
      let g = parseInt(binaryData.substring(i + 8, i + 16), 2);
      let b = parseInt(binaryData.substring(i + 16, i + 24), 2);
      colors.push([r, g, b]);
      i += 24;
    }
    if (i >= Math.pow(2, colorDepth) * 24 + 32) {
      let color = colors[parseInt(binaryData.substring(i, i + colorDepth), 2)];
      let size = parseInt(binaryData.substring(i + colorDepth, i + colorDepth + blockSize), 2);
      for (let j = 0; j < size; j++) {
        pixels.push(color);
      }
      i += colorDepth + blockSize;
    }
  }


  for (let i = 0; i < width * height; i++) {
    let x = Math.floor((i % width) / cellSize);
    let y = Math.floor(i / height / cellSize);
    let i2 = y * width2 + x;
    let i3 = i * 4;
    if (x < width2 && y < height2) {
      let color = pixels[i2];
      imgData.data[i3] = color[0];
      imgData.data[i3 + 1] = color[1];
      imgData.data[i3 + 2] = color[2];
      imgData.data[i3 + 3] = 255; // Alpha channel
    } else {
      imgData.data[i3] = 255;
      imgData.data[i3 + 1] = 255;
      imgData.data[i3 + 2] = 255;
      imgData.data[i3 + 3] = 255; // Alpha channel
    }
  }


  // put data to context at (0, 0)
  context.putImageData(imgData, 0, 0);


  // output image
  var img = new Image();
  img.src = canvas.toDataURL("image/png");


  return img;
}


document.body.appendChild(
  getImage(
    "00000100 00000101 00000010 00000010 00000000 00000000 00000000 01010101 01010101 01010101 01010101 01010101 01010101 11111111 11111111 11111111 01110001 01011110 10010110 11010001 01011110 00010111 0001"
      .split(" ")
      .join("")
  )
);