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.

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 <img> element containing the converted PNG image
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

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

// returns an <img> 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, 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.

Issues and compatibility

• Only works in canvas-enabled browsers (that means no IE).
• With Safari, you might need use the convert option and right click the image and select "save as" in order to save it.
• It would be really neat if somehow a filename could be attached to the data, but I've found no way to do that. For now, you have to specify the filename yourself.
• Since btoa() is only supported in Firefox, I've implemented base64 encoding using these functions made by Masanao Izumo

Ukrainian translation courtesy of Mario Pozner.

http://www.nihilogic.dk/labs/canvas2image/