Why are the screenshot colors incorrect when generating a PNG from Robot.js raw buffer?

The issue is that Robot.js returns pixels in BGRA order, while you're writing a PNG with a color type (6) that expects RGBA. In other words, the red and blue channels are swapped.

A quick fix is to swap the red and blue bytes for each pixel before writing the PNG. For example, after you copy the raw pixel data into your filtered data (remembering to skip the filter byte at the start of each row), you can loop over each pixel and swap the appropriate bytes. Here's one way to do it:

JAVASCRIPTCopied
const fs = require('fs');
const zlib = require('zlib');
const robot = require("@jitsi/robotjs");

const { width, height } = robot.getScreenSize();
const bitDepth = 8;
const colorType = 6;
const bytesPerPixel = 4;
const rawPixelData = robot.captureScreen().image;

const rowBytes = width * bytesPerPixel;
const filteredData = Buffer.alloc((rowBytes + 1) * height);

// Copy raw data into filteredData with filter bytes (filter type = 0)
for (let i = 0; i < height; i++) {
  const filteredRowStart = i * (rowBytes + 1);
  filteredData[filteredRowStart] = 0; // filter byte 0

  rawPixelData.copy(
    filteredData,
    filteredRowStart + 1,
    i * rowBytes,
    (i + 1) * rowBytes
  );
}

// Swap red and blue channels in each pixel of filteredData
for (let i = 0; i < height; i++) {
  const rowStart = i * (rowBytes + 1) + 1; // skip filter byte
  for (let j = 0; j < width; j++) {
    const pixelOffset = rowStart + j * bytesPerPixel;
    // Swap red (index 0) and blue (index 2)
    const temp = filteredData[pixelOffset];
    filteredData[pixelOffset] = filteredData[pixelOffset + 2];
    filteredData[pixelOffset + 2] = temp;
  }
}

const compressedData = zlib.deflateSync(filteredData);

// CRC32 calculation
function crc32(buf) {
  let crc = 0xffffffff;
  for (let i = 0; i < buf.length; i++) {
    crc ^= buf[i];
    for (let j = 0; j < 8; j++) {
      if (crc & 1) {
        crc = (crc >>> 1) ^ 0xedb88320;
      } else {
        crc >>>= 1;
      }
    }
  }
  const crcFinal = crc ^ 0xffffffff;
  return Buffer.from([
    (crcFinal >>> 24) & 0xff,
    (crcFinal >>> 16) & 0xff,
    (crcFinal >>> 8) & 0xff,
    crcFinal & 0xff,
  ]);
}

function createChunk(type, data) {
  const length = Buffer.alloc(4);
  length.writeUInt32BE(data.length, 0);

  const typeBuffer = Buffer.from(type, "ascii");
  const crc = crc32(Buffer.concat([typeBuffer, data]));

  return Buffer.concat([length, typeBuffer, data, crc]);
}

const pngSignature = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);

const ihdrData = Buffer.alloc(13);
ihdrData.writeUInt32BE(width, 0);
ihdrData.writeUInt32BE(height, 4);
ihdrData.writeUInt8(bitDepth, 8);
ihdrData.writeUInt8(colorType, 9);
ihdrData.writeUInt8(0, 10);
ihdrData.writeUInt8(0, 11);
ihdrData.writeUInt8(0, 12);

const ihdrChunk = createChunk("IHDR", ihdrData);
const idatChunk = createChunk("IDAT", compressedData);
const iendChunk = createChunk("IEND", Buffer.alloc(0));

const pngData = Buffer.concat([pngSignature, ihdrChunk, idatChunk, iendChunk]);

fs.writeFileSync("./output.png", pngData);
console.log("PNG file written: output.png");

Explanation

1. Filter Bytes:
   The PNG specification requires that each scanline is prefixed with a filter byte (here we use 0, meaning "no filter").

2. Channel Swap:
   Robot.js returns pixels in BGRA order. The PNG (color type 6) expects RGBA, so a swap of the red (first) and blue (third) byte is needed for each pixel.

3. Compression and Chunk Creation:
   The rest of your code builds the PNG structure as required, including CRC computation and chunk concatenation.

This should produce a PNG with the correct colors.