How to save HTML5 canvas?

Question

Currently I am using Canvas2Image to save the content of my HTML5 canvas. It doesn't appear to work in Google Chrome, however. Any ideas on how to work around the issue are welcome. :)

Answer 1

canvas.toDataURL() appears to work fine in Chrome, so it may be a library issue. The "convert canvas to image" functionality seems to work, though.

Answer 2

Yes i did it! =)

Take a look into www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/CanvasBox.js?rev=239#ln1235. You can see it running on http://www.thiagomata.com/codetodiagram/svn/experimental/canvasBox/classDiagram/classDiagram.html.

To make the image dont show into the browser but be as one donwload, i need to create this simple php file: www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/download.php?rev=239

I need to create a close.html to the browser dont keep a about:blank page after the download start www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/close.html?rev=239

I will probaly make a big post about it into the thiagomata.blog.com but i think with this files you will already be able to find the way.

Maybe, if you read this post in the future the thiagomata.com link can be broken because i will soon migrate this project to the codetodiagram.com.

That's it! Thiago Mata

Answer 3

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var strDataURI = canvas.toDataURL("image/png;base64"); document.write('');