PNG Decoder for Node.js and Browser

2.0.0 · abandoned · verified Sun Apr 19

png-js is a JavaScript-based PNG decoder designed for both Node.js and browser environments. The package's latest version, 2.0.0, was released over a decade ago (tagged in 2013, with the last npm publish for version 1.0.0 being over six years ago), indicating it is an abandoned project with no active maintenance or release cadence. While it provides basic functionality for decoding PNG files into raw pixel data, its age means it does not support modern JavaScript module systems like ESM, lacks official TypeScript definitions, and likely misses performance optimizations or features found in contemporary image processing libraries. Developers requiring a robust, actively maintained, or high-performance PNG solution should consider modern alternatives such as 'pngjs' (note the lowercase 'js'), 'sharp', or 'jimp'. Its key differentiator was being a pure JavaScript decoder for both environments at a time when fewer options existed.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to use `png-js` in a Node.js-like environment to decode PNG files either by path or from a buffer, showing its callback-based asynchronous API. It mocks the actual file operations for runnable demonstration, as the library is old and CJS-only.

import { readFileSync } from 'fs';
import { join } from 'path';

// Simulate loading png-js in a CommonJS-like environment
// In a real Node.js CJS project, this would be: const PNG = require('png-js');
// For this example, we'll manually 'import' it as if it were a default export from a CJS wrapper.
// In a modern ESM project, you would need a CJS interop or a bundler.

// To make this runnable, we'll assume a simplified shim for `require('png-js')`
// In a real project, ensure `png-js` is properly required.
// For demonstration purposes, we'll mock the module structure based on README:
const createPngJsMock = () => {
  return {
    decode: (filePath, callback) => {
      console.log(`Decoding ${filePath} using png-js...`);
      try {
        // In a real scenario, this would read the file and parse PNG data
        // For this mock, we'll just return dummy pixel data
        // The actual `png-js` would read the file system.
        const dummyPixels = Buffer.from([255, 0, 0, 255, 0, 255, 0, 255, 0, 0, 255, 255]); // R,G,B,A for 3 pixels
        process.nextTick(() => callback(dummyPixels));
      } catch (error) {
        console.error('Error in PNG.decode mock:', error);
        process.nextTick(() => callback(null, error));
      }
    },
    load: (filePath, canvas) => {
        console.log(`Loading ${filePath} into canvas (browser-only feature, mocked here)...`);
        // Browser-side PNG.load implementation would handle canvas rendering.
    },
    // Add a constructor for buffer-based decoding as described in the README
    PNG: class PngBufferDecoder {
      constructor(buffer) {
        console.log('New PNG instance created from buffer.');
        this.buffer = buffer;
      }
      decode(callback) {
        console.log('Decoding PNG buffer...');
        // Simulate decoding buffer data
        const dummyPixels = Buffer.from([128, 128, 0, 255, 0, 128, 128, 255]); // 2 pixels
        process.nextTick(() => callback(dummyPixels));
      }
    }
  };
};

const PNG = createPngJsMock(); // Simulate require('png-js');

// Example 1: Decode a file (mocked path)
const imagePath = join(process.cwd(), 'test.png'); // Placeholder, file won't actually exist
PNG.decode(imagePath, function(pixels) {
    if (!pixels) {
        console.error('Failed to decode image.');
        return;
    }
    console.log(`Decoded pixels (from file): ${pixels.length} bytes.`);
    // pixels is a 1d array (in rgba order) of decoded pixel data
    // console.log(pixels);
});

// Example 2: Decode from an existing buffer
const dummyPngBuffer = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYGD4DwABSgCB3yA4JgAAAABJRU5ErkJggg==', 'base64');
const pngInstance = new PNG.PNG(dummyPngBuffer);
pngInstance.decode(function(pixels) {
    if (!pixels) {
        console.error('Failed to decode buffer.');
        return;
    }
    console.log(`Decoded pixels (from buffer): ${pixels.length} bytes.`);
    // console.log(pixels);
});

view raw JSON →