Canvas2Image : Saving Canvas data to image file

This is a small library that lets you easily save a HTML5 canvas element as an imagefile.
Files needed: canvas2image.js, base64.js

Draw on the canvas with the pretty boxes below using the mouse, then click the "Convert" buttons to convert it to a downloadable image - or the "Save" buttons to download the image file directly.

Using the HTML5 canvas element, you can create all sorts of cool graphics client-side on the fly using Javascript. However, the canvas image cannot (in all browsers) simply be saved to disk as any other image.
Luckily there is a neat function on the the canvas object called toDataURL(). This functions encodes the image data as a base64 encoded PNG file and returns it as a data: URI.
Other formats than PNG are supported by some browsers by adding an argument to the toDataURL() call containing the mime type of the format you want.It looks like Opera and Safari only supports PNG, while Firefox supports at least PNG and JPEG.

Now, Using that data string, we can stick it in an <img> element or we can serve it directly to the browser and force it to download the image by replacing the mimetype.
That is basically what this little library does. The following functions are provided:So, you may have noticed the saveAsBMP function. Since BMP is not supported by any of the browsers (and I felt like wasting an afternoon), BMP support has been added by utilizing the getImageData() method, which enabled us to read raw pixel data from the canvas.

Using this data, we can set up a BMP file structure (which is really simple compared to most other image formats), base64 encode everything and create our own data: URI.

The getImageData() method is only available in Firefox, the latest Opera and Safari using the latest WebKit nightly. For larger images, it can take several seconds to encode the image to BMP, but for smaller canvases, it seems fine and fast.