Triggering a download from canvas.toDataURL client-side?

Question

I have a canvas element on a page. I call canvas.toDataURL() and now have a handle on its image data.

Do I need to post this data to the server, have my server construct a file stream using that data, then set my document's location to the file stream returned? Seems like a lot of overhead when I have all my data client-side...

Answer 1

Sure, check out Canvas2Image.js

// 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); 

Internally all it's doing is base64 encoding the data and calling document.location.href = base64EncodedData; .

Answer 2

you could set the DataURL to a img elem

var plane = document.getElementsByTagName ( "canvas" )[0],
ctx = plane.getContext("2d"),   
img = document.createElement("img");
ctx.fillRect ( 0,0,400,400 );
img.src = plane.toDataURL();
document.body.appendChild ( img );

of course old ie don't support this