Draw image from pixel data arrays

Question

If I have an array of pixel data in JavaScript, is there a good way to display it on an HTML page?

• On recent versions of Safari and Firefox, I can make a <canvas> element and use putImageData to display the pixels, but ideally a solution could work on older versions as well and more importantly, work on Internet Explorer.
• Another solution which seems more tangible could be to encode the pixels into a standard image format and create a data: URI with the pixels and set that as the src of an <img> element. Unfortunately, it seems like most image formats are complex and I'm having a hard time finding a simple one that can do the job (BMP looks like a possibility but does not work on Safari). Also, versions of Internet Explorer before IE 8 don't support data: URIs at all.

I doubt any exist, but does anyone know of image libraries for JavaScript that can generate image in a standard format? Is there a way to replicate the functionality of a data: URI in IE 7?

Answer 1

Canvas is a good solution, for-cross browser support see Mark Pilgrim's excellent tutorial. Specifically, the "What about IE?" section and using ExplorerCanvas. You can use and create data: URIs in the PNG and JPEG formats with canvas.

Answer 2

Maybe check out fxCanvas http://burzak.com/pro/fxcanvas/

I think they implement even ‘putImageData‘ in IE using Flash.

Answer 3

Does PNG format work for your targets? If so PNGlib looks pretty good.

Also, JS JPEG Encoder looks good but it takes as input the returned value of Canvas.getImageData().

Don't know what you can do to support IE 7 though.

Answer 4

Check you Raphaël - http://raphaeljs.com/

While this may be slow, and it is not the intended use of the library, it will work with support for browsers you're interested in.