Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here


A (animated) PNG decoder in JavaScript for the HTML5 canvas element and Node.js

Subscribe to updates I use png.js

Statistics on png.js

Number of watchers on Github 340
Number of open issues 19
Average time to close an issue 5 months
Main language CoffeeScript
Average time to merge a PR about 21 hours
Open pull requests 10+
Closed pull requests 0+
Last commit about 2 years ago
Repo Created over 8 years ago
Repo Last Updated over 1 year ago
Size 1.84 MB
Homepage http://devongovet...
Organization / Authordevongovett
Page Updated
Do you use png.js? Leave a review!
View open issues (19)
View png.js activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating png.js for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


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

Browser Usage

Simply include png.js and zlib.js on your HTML page, create a canvas element, and call PNG.load to load an image.

<script src="zlib.js"></script>
<script src="png.js"></script>
    var canvas = document.getElementsByTagName('canvas')[0];
    PNG.load('some.png', canvas);

The source code for the browser version resides in png.js and also supports loading and displaying animated PNGs.

Node.js Usage

Install the module using npm

sudo npm install png-js

Require the module and decode a PNG

var PNG = require('png-js');
PNG.decode('some.png', function(pixels) {
    // pixels is a 1d array (in rgba order) of decoded pixel data

You can also call PNG.load if you want to load the PNG (but not decode the pixels) synchronously. If you already have the PNG data in a buffer, simply use new PNG(buffer). In both of these cases, you need to call png.decode yourself which passes your callback the decoded pixels as a buffer. If you already have a buffer you want the pixels copied to, call copyToImageData with your buffer and the decoded pixels as returned from decodePixels.

png.js open issues Ask a question     (View All Issues)
  • about 3 years Please define your licence
  • about 3 years From browser Worker
  • over 3 years I can't decode this file
  • over 5 years Can't decode png with BGR
  • over 5 years Indexed png transparency increased to incorrrect length of 255
  • about 6 years png.decode callback function
  • about 6 years 16-bit PNGs not rendered correctly
  • over 6 years "Invalid arguments" when pixelBytes set to 0.5
  • about 7 years Implemented interlacing support for Node.js (in JavaScript, not CoffeeScript).
png.js open pull requests (View All Pulls)
  • include only png-node.js
  • added keywords
  • Wiping blue's from pngs with no transparency.
  • Add ability to load data from a buffer
  • Node.js/palette conversion: fixed palette size when transparency is missing.
  • add .npmignore
  • Add support for synchronous decode
  • Support for Web Workers
  • Fix interlace method for png image
  • Adding license info to the package.json
png.js list of languages used
Other projects in CoffeeScript