Search code examples
javascriptimagecanvaspixeldata-url

Draw image from pixel data arrays

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?

Solution

  • 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.