It was once again one of those nights where I hacked like on drugs with no end in sight. Sure, 5 years ago you had loved me with such a project, but in times of HTML5 with the canvas element it is hard to impress you. So take it as proof of creating client side images without canvas, SVG, or server side rendering and AJAX processing.

But how is this possible? Well, I've implemented a client-side JavaScript library like libpng which creates a PNG data stream. The resulting binary data can be appended to the data URI-scheme using Base64 encoding.

The next step would be implementing shapes and forms to allow an easier image manipulation, but I think this is not necessary. I just wanted to learn the PNG file format, who wants to use the library can implement the rest by himself. At the moment it's only possible to write colors to a certain pixel position. I do not recommend a production use of this lib without input validation. The class is really spartanic, but it works :)

But enough of preface, let's dig a little deeper on how we can use the library. I wrote a little example which looks like this:

The implementation is quite simple, but there is still no setter method to set a pixel. You have to access the internal buffer directly with

I love this library. I was wondering if you've made any improvements to it since you first released it. I've noticed it can get slow when the image gets larger, so before I dive into performance optimization I thought I'd ask if you have any updates. Thanks!

blablabla

commented after 48 weeks

¿Only runs with 256 colors? ¬¬

Matt

commented after 41 weeks

Internet Explorer 8 does support the Data URI scheme, but only for base64 strings < 32KBytes. Than means only small images. Hopefully IE9 will support bigger ones.

As for this project? Effin' brilliant. I've been contemplating doing the very same thing myself - now you've taken all the hard work out of it for me! Thanks!

This is excellent. It means one can generate transparent transients on the client side...
The right transient for the right element gives great flexibility in UI design, epecially when using mootools or jquery...

As per IE users acting up here...
If you opt for having your eyes removed, do not complain about the dark.

Leo

commented after 16 weeks

It is a great job, well done!

But i tried to set the width or height to be more than 255, like 300, then the picture can not be generated, why?

Itamar

commented after 15 weeks

I see some really snarky comments here, which are really uncalled for!
This is a great project!

Canyyyon

commented after 4 days

Well done, man. Base64 doesn't works with ie. But i think this would be very useful. Love your job. Thanks ;-)

Ian

commented after 4 days

Very impressive.

westworld

commented after 2 days

haha, Another mad project :) Works fine on firefox
Hope IE 9 will have base64

Guest User

commented after one day

Because the author thinks every asshole out there use non-IE web browsers.