node-canvas: output PNG file as interlaced/progressive

Question

node-canvas is a Node.js version of the HTML5 canvas library that depends on Cairo. My app creates a bunch of PNG files depending on that data that is sent to the app.

node-canvas offers two functions toBuffer() and toDataURL() which outputs raw PNG or Base64 encoded PNG to a string which I can send to the browser. However there is no way to add support for interlacing in the library.

I'd like to extend the functionality of the library and add support for interlaced PNGs. I have the raw PNG data in a string, and also an array of pixels for the image (if need be). I do not have an understanding of how PNG encoding works. Can someone please point me to the algorithm I need to use to convert the data I have, either the non-interlaced raw PNG data or the pixel array and convert it to an interlaced/progressive PNG?

This is a necessary step for the graphing calculator app that I am building that graphs complex equations. It would be good to have a blurry image that appears quickly and sharpens over time than a non-interlaced PNG that loads from top to bottom for my app.

Thanks!

Answer 1

You can't convert a non-interlaced raw PNG data to a interlaced PNG stream. Interlaced vs non-interlaced PNG are two different ways of PNG encoding (they basically differ in the pixel stream ordering, but after that a filter-compression is applied, so you can't simply alter the final stream to switch between interlaced and non-interlaced modes). TO generate an interlaced PNG is work of the PNG encoder, the one which is used to write your PNG files (or stream) from the raw image pixels.

Nevertheless, I'd advise you against interlaced images; the compression efficiency suffers (specially with PNG) and the advantage for the user experience is at least debatable. See eg. Today, interlaced PNG is seldom used.