pngjs

by arian

arian / pngjs

Pure JavaScript PNG decoder

135 Stars 52 Forks Last release: Not found MIT License 37 Commits 7 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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]
png.getRGBA8Array(); // [r1, g1, b1, a1, r2, b2, g2, a2, ... ] - Same as canvas.getImageData
// 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 browserify:

browserify ./PNGReader.js -s PNGReader

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.