@types/pngjs

Reading PNG files

This feature allows you to read PNG files and access their properties such as width and height.

const fs = require('fs');
const PNG = require('pngjs').PNG;

fs.createReadStream('in.png')
  .pipe(new PNG())
  .on('parsed', function() {
    console.log('Width:', this.width);
    console.log('Height:', this.height);
  });

Writing PNG files

This feature allows you to create and write PNG files. The example creates a 100x100 red PNG image.

const fs = require('fs');
const PNG = require('pngjs').PNG;

const png = new PNG({ width: 100, height: 100 });

for (let y = 0; y < png.height; y++) {
  for (let x = 0; x < png.width; x++) {
    const idx = (png.width * y + x) << 2;
    png.data[idx] = 255;
    png.data[idx + 1] = 0;
    png.data[idx + 2] = 0;
    png.data[idx + 3] = 255;
  }
}

png.pack().pipe(fs.createWriteStream('out.png'));

Manipulating PNG data

This feature allows you to manipulate the pixel data of a PNG file. The example inverts the colors of the input PNG.

const fs = require('fs');
const PNG = require('pngjs').PNG;

fs.createReadStream('in.png')
  .pipe(new PNG())
  .on('parsed', function() {
    for (let y = 0; y < this.height; y++) {
      for (let x = 0; x < this.width; x++) {
        const idx = (this.width * y + x) << 2;
        this.data[idx] = 255 - this.data[idx];
        this.data[idx + 1] = 255 - this.data[idx + 1];
        this.data[idx + 2] = 255 - this.data[idx + 2];
      }
    }
    this.pack().pipe(fs.createWriteStream('out.png'));
  });