{"library":"pngjs","title":"pngjs - Pure JS PNG Encoder/Decoder","description":"pngjs is a pure JavaScript library for encoding and decoding PNG images, primarily designed for Node.js environments but also usable in browsers via Browserify. It offers both synchronous and asynchronous APIs, supporting a wide range of PNG bit depths (1, 2, 4, 8, 16-bit) and interlace types for reading. The library distinguishes itself by having no external dependencies, providing a lightweight solution for image manipulation. The current stable version is 7.0.0. While it supports reading various color types and bit depths, its asynchronous writing API primarily processes 8-bit per sample (channel) images and does not support interlaced mode for output. It can read `tTRNS` transparent colors and supports writing colortype 0 (grayscale), 2 (RGB), 4 (grayscale alpha), and 6 (RGBA), but currently lacks support for extended PNG features like animation and writing indexed color (colortype 3). Its API is compatible with older `pngjs` and `node-pngjs` implementations, and it is rigorously tested against the PNG Suite.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install pngjs"],"cli":null},"imports":["import { PNG } from 'pngjs';","const { PNG } = require('pngjs');","import { PNG } from 'pngjs/browser';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createReadStream, createWriteStream } from 'fs';\nimport { PNG } from 'pngjs';\n\n// Create a dummy PNG file for the example if it doesn't exist\nconst dummyPngData = Buffer.from([\n  0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d, 0x49, 0x48, 0x44, 0x52,\n  0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01, 0x08, 0x06, 0x00, 0x00, 0x00, 0x1f, 0x15, 0xc4,\n  0x89, 0x00, 0x00, 0x00, 0x0a, 0x49, 0x44, 0x41, 0x54, 0x78, 0x9c, 0x63, 0x00, 0x01, 0x00, 0x00,\n  0x05, 0x00, 0x01, 0x0d, 0x0a, 0x2d, 0xb4, 0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4e, 0x44, 0xae,\n  0x42, 0x60, 0x82\n]);\ncreateWriteStream('in.png').write(dummyPngData, () => {\n  console.log('Dummy in.png created.');\n\n  createReadStream('in.png')\n    .pipe(\n      new PNG({\n        filterType: 4\n      })\n    )\n    .on('parsed', function () {\n      console.log('PNG parsed. Image dimensions:', this.width, 'x', this.height);\n      for (let y = 0; y < this.height; y++) {\n        for (let x = 0; x < this.width; x++) {\n          const idx = (this.width * y + x) << 2;\n\n          // Invert color\n          this.data[idx] = 255 - this.data[idx];       // R\n          this.data[idx + 1] = 255 - this.data[idx + 1]; // G\n          this.data[idx + 2] = 255 - this.data[idx + 2]; // B\n\n          // Reduce opacity by half\n          this.data[idx + 3] = this.data[idx + 3] >> 1; // A\n        }\n      }\n      console.log('Image data modified. Packing...');\n      this.pack().pipe(createWriteStream('out.png'))\n        .on('finish', () => console.log('Generated out.png with inverted colors and reduced opacity.'));\n    })\n    .on('error', (err) => {\n      console.error('Error during PNG parsing:', err.message);\n    });\n});","lang":"javascript","description":"This example demonstrates how to read a PNG file, manipulate its pixel data (inverting colors and reducing opacity), and then write the modified image to a new PNG file using the `pngjs` asynchronous API. It includes a small dummy PNG creation for immediate runnable testing.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}