Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

png.js

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 almost 2 years ago
Repo Created almost 8 years ago
Repo Last Updated over 1 year ago
Size 1.84 MB
Homepage http://devongovet...
Organization / Authordevongovett
Contributors4
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 (?)

png.js

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.

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

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)
  • over 2 years Please define your licence
  • almost 3 years From browser Worker
  • about 3 years I can't decode this file
  • about 5 years Can't decode png with BGR
  • over 5 years Indexed png transparency increased to incorrrect length of 255
  • almost 6 years png.decode callback function
  • almost 6 years 16-bit PNGs not rendered correctly
  • about 6 years "Invalid arguments" when pixelBytes set to 0.5
  • over 6 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