CODEWITHSUNDEEP
node.jspng
Jan Špaček
Jan Špaček

Reputation: 1108

Reading a PNG image in Node.js

Is there an easy way in Node.js to read a PNG file and get the pixels of the image? Something like node-image, but the other way :)

I went through the libraries listed at https://github.com/joyent/node/wiki/modules#wiki-graphics, but they are either simple wrappers around command line tools providing cropping and resizing or complex drawing tools like node-canvas.

Upvotes: 24

Views: 49397

Answers (3)

P.D.P.
P.D.P.

Reputation: 637

This one does both PNG decoding and encoding without native dependancies:

pngjs - PNG encoder/decoder for Node.js with no native dependencies.

An example for inverting the colors of a PNG:

var fs = require('fs'),
PNG = require('pngjs').PNG;

fs.createReadStream('in.png')
  .pipe(new PNG())
  .on('parsed', function() {

    for (var y = 0; y < this.height; y++) {
        for (var x = 0; x < this.width; x++) {
            var idx = (this.width * y + x) << 2;

            // invert color
            this.data[idx] = 255 - this.data[idx]; // R
            this.data[idx+1] = 255 - this.data[idx+1]; // G
            this.data[idx+2] = 255 - this.data[idx+2]; // B

            // and reduce opacity
            this.data[idx+3] = this.data[idx+3] >> 1;
        }
    }

    this.pack().pipe(fs.createWriteStream('out.png'));
});

Upvotes: 28

Alba Mendez
Alba Mendez

Reputation: 4635

I was about to became mad searching, but I found one:

png.js ― A PNG decoder in JS for the canvas element or Node.js.

var PNG = require('png-js');

var myimage = new PNG('myimage.png');

var width  = myimage.width;
var height = myimage.height;

myimage.decode(function (pixels) {
    //Pixels is a 1D array containing pixel data
});

Please note it's pure JavaScript. Works both in the browser <canvas> and in Node.JS.

There are more properties apart from width and height, see this source.

Upvotes: 16

Peter Grundmann
Peter Grundmann

Reputation: 129

I think

var myimage = new PNG('myimage.png');

should be

var myimage = new PNG.load('myimage.png');

Upvotes: 4

Related Questions