Drawing an 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?

• In recent versions of Safari and Firefox, I can create a <canvas> and use putImageData to display pixels, but ideally the solution can work on earlier versions, and more importantly, work in Internet Explorer.
• Another solution that seems more tangible could be to encode the pixels into a standard image format and create a URI data: with pixels and set it as the src of the <img> element. Unfortunately, it seems that most image formats are complex, and it's hard for me to find a simple one that can do the job (BMP looks like an option, but doesn't work on Safari). In addition, versions of Internet Explorer prior to IE 8 do not support data: URIs at all.

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

Answer 1

Does the PNG format work for your purposes? If so, PNGlib looks good.

In addition, the JS JPEG Encoder looks good, but takes Canvas.getImageData () as the return value.

I don’t know what you can do to support IE 7.

Answer 2

Canvas is a good solution, for cross-browser support see the great Mark Pilgrim tutorial:

http://diveintohtml5.ep.io/canvas.html In particular, "What about IE?" and use explorercanvas. You can use and create data: URIs in png and jpeg formats with a canvas.

Answer 3

Check out Raphael - http://raphaeljs.com/

Although this can be slow, and this is not the intentional use of the library, it will work with the support of browsers that interest you.

Answer 4

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

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