Saving canvas data to image file

Canvas2Image v0.1

Comments: go here

This is a small library that lets you easily save a WHATWG 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 WHATWG canvas element, you can create all sorts of cool graphics client-side on the fly using Javascript. However, the canvas image cannot 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.
var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
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.
var strDataURI = oCanvas.toDataURL("image/jpeg");
// returns "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..."
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:

/*
 * Canvas2Image.saveAsXXXX = function(oCanvasElement, bReturnImgElement, iWidth, iHeight) { ... }
 */

var oCanvas = document.getElementById("thecanvas");

Canvas2Image.saveAsPNG(oCanvas);  // will prompt the user to save the image as PNG.

Canvas2Image.saveAsJPEG(oCanvas); // will prompt the user to save the image as JPEG. 
                                  // Only supported by Firefox.

Canvas2Image.saveAsBMP(oCanvas);  // will prompt the user to save the image as BMP.


// returns an  element containing the converted PNG image
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);   

// returns an  element containing the converted JPEG image (Only supported by Firefox)
var oImgJPEG = Canvas2Image.saveAsJPEG(oCanvas, true); 
                                                       
// returns an  element containing the converted BMP image
var oImgBMP = Canvas2Image.saveAsBMP(oCanvas, true); 


// all the functions also takes width and height arguments. 
// These can be used to scale the resulting image:

// saves a PNG image scaled to 100x100
Canvas2Image.saveAsPNG(oCanvas, false, 100, 100);

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, Opera beta 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.


Issues and compatibility
Ukrainian translation courtesy of Mario Pozner.


Comments: go here




(c) 2007-2008 Jacob Seidelin