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. :)

score 7 · Accepted Answer · answered Mar 30 '10 at 10:10

7

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.

answered Mar 30 '10 at 10:10

Amber

477,764
81
611
541

1

Okay. The library uses toDataUrl and "document.location.href" for providing save dialog. Apparently "document.location.href" isn't supported by Chrome. – Juho Vepsäläinen Mar 30 '10 at 11:22
Any progress with this: is it possible to get a Save As... dialog in Chrome as for Firefox? – Sam Dutton May 21 '10 at 12:59

score 5 · Answer 2 · answered Jan 09 '13 at 06:07

5

use this code

<html>
<head>
<script src="base64.js" type="text/javascript"></script>
<script src="canvas2image.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="savecanvas" value="Save Image" onclick="savecanvasfile()"/>
</body>
</html>



<script>
function savecanvasfile(){
    var canvas = document.getElementById('canvas_name');
    var context = canvas.getContext('2d');
    var strDataURI = canvas.toDataURL();
    Canvas2Image.saveAsPNG(canvas);
}
</script>

download these canvas2image.js and base64.js and save it in local folder for the working of this code.

These will be available in the site http://www.nihilogic.dk/labs/canvas2image/

answered Jan 09 '13 at 06:07

Abi

65
1
6

Interesting approach but you cannot choose the file name, or am I missing something? – malber Mar 19 '13 at 08:10
yeah!! But I cannot choose a name while I'm running it in Chrome. But Firefox browser prompts for the file name to save it. How this can be resolved?? – Abi Mar 20 '13 at 11:28
In my case Firefox asks for saving the file, not for changing its name. A workaround for Chrome and IE (HTML5) without touching anything server-side is this: http://stackoverflow.com/questions/3906142/how-to-save-a-png-from-javascript-variable/15504286#15504286 . No solution yet for Firefox. – malber Mar 20 '13 at 13:09

score 4 · Answer 3 · edited Oct 22 '12 at 00:04

4

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

edited Oct 22 '12 at 00:04

Drew Noakes

284,599
158
653
723

answered Sep 26 '10 at 22:54

Nitesh

91
4

score 2 · Answer 4 · edited May 09 '13 at 17:29

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

Thanks for sharing your approach! – Juho Vepsäläinen Aug 14 '10 at 06:54 — Juho Vepsäläinen, Aug 14 '10 at 06:54

How to save HTML5 canvas?

4 Answers4

Linked