How to save HTML5 canvas?

问题

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

回答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.

回答2:

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/

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/2544260/how-to-save-html5-canvas

标签

html5

save

html5-canvas