Need help with pngjs?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

arian
154 Stars 55 Forks MIT License 37 Commits 14 Opened issues

Description

Pure JavaScript PNG decoder

Services available

!
?

Need anything else?

Contributors list

# 84,044
React
React N...
estree
ecmascr...
30 commits
# 64,108
Less
HTML
React
react-m...
1 commit
# 18,134
TypeScr...
qr
qrcode-...
Objecti...
1 commit
# 653,119
JavaScr...
HTML
1 commit

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.