Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Pure JavaScript PNG decoder

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 html
Octocat-spinner-32 test
Octocat-spinner-32 .gitignore
Octocat-spinner-32 .jshintrc
Octocat-spinner-32 Makefile
Octocat-spinner-32 PNG.js
Octocat-spinner-32 PNGReader.js
Octocat-spinner-32 README.md
Octocat-spinner-32 package.json
Octocat-spinner-32 stream.js
README.md

PNG.js

PNG.js is a PNG decoder fully written in JavaScript. It works in Node.js as well as in (modern) browsers.

Usage

var PNGReader = require('png.js');

var reader = new PNGReader(bytes);
reader.parse(function(err, png){
    if (err) throw err;
    console.log(png);
});

Or with options:

reader.parse({
    data: false
}, function(err, png){
    if (err) throw err;
    console.log(png);
});

Currently the only option is:

  • data (boolean) - should it read the pixel data, or only the image information.

PNG object

The PNG object is passed in the callback. It contains all the data extracted from the image.

// most importantly
png.getWidth();
png.getHeight();
png.getPixel(x, y); // [red, blue, green, alpha]
// but also
png.getBitDepth();
png.getColorType();
png.getCompressionMethod();
png.getFilterMethod();
png.getInterlaceMethod();
png.getPalette();

Using PNGReader in Node.js

PNGReader accepts an Buffer object, returned by fs.readFile, for example:

fs.readFile('test.png', function(err, buffer){

    var reader = new PNGReader(buffer);
    reader.parse(function(err, png){
        if (err) throw err;
        console.log(png);
    });

});

Using PNGReader in the Browser

PNGReader accepts a byte string, array of bytes or an ArrayBuffer.

For example using FileReader with file input fields:

var reader = new FileReader();

reader.onload = function(event){
    var reader = new PNGReader(event.target.result);
    reader.parse(function(err, png){
        if (err) throw err;
        console.log(png);
    });
};

fileInputElement.onchange = function(){
    reader.readAsArrayBuffer(fileInputElement.files[0]);
    // or, but less optimal
    reader.readAsBinaryString(fileInputElement.files[0]);
};

Or instead of using input elements, XHR can also be used:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'image.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e){
    if (this.status == 200){
        var reader = new PNGReader(this.response);
        reader.parse(function(err, png){
            if (err) throw err;
            console.log(png);
        });
    }
};

xhr.send();

Building Browser Version

PNG.js uses CommonJS modules which can be used in browsers after building it with wrapup:

wrup -r PNGReader ./PNGReader.js

# or with the predefined make commands
make build-browser
make build-browser-min
Something went wrong with that request. Please try again.