JavaScript PNG Generator
I know that I’ve written some wacky things before, but this has to be the silliest code I’ve implemented in SVG+EcmaScript. Andreas Neumann referenced a site discussing client-side generation of PNG files, called Pnglets, using JavaScript. It just so happens that I’ve been wanting to write a lightweight PNG generator, most likely in C. I saw this as a wonderful opportunity to implement a prototype with SVG and EcmaScript.
Like Pnglets, I decided to limit my JS PNGs to uncompressed indexed PNG files with optional transparency for each palette entry. This approach avoids what I think would be a costly compression step and generally made the code easier for me to write.
Current capabilities are limited to the creation of any size PNG file, although sizes less than 200×200 are highly recommended as this code gets really slow with sizes larger than that. You can define entries in the color palette along with an associated transparency. The background color is defined as the 0′th entry in the color palette. You can plot pixels using a specified palette index and you can convert the current state of the PNG file to an array of bytes or to a base64 encoded version of those bytes. A sample is included on the implementation page showing the creation of a simple PNG image which is then displayed in the hosting SVG document.
The Pnglets page links to a discussion showing that the CRC and Checksum steps used to create the final PNG data add the greatest overhead. This is most likely what is making large images so slow in my code. I haven’t profiled my code, but his reasoning is sound. As an aside, I’m interested to see if the overhead of compression results in an overall decrease in processing time. Also, future enhancements may include additional color formats and possibly some drawing primitives. Again, I hope to convert this code to another language that is better suited to this type of processing. The implementation here is purely an SVG curiosity and is serving as a prototype for later work.