How to save HTML5 canvas?

后端未结

关注

 4  402

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 wel

相关标签:

4条回答

半阙折子戏

2021-02-01 09:45

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

感情败类

2021-02-01 09:48

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/

0 讨论(0)

庸人自扰

2021-02-01 09:54

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

0 讨论(0)

栀梦

2021-02-01 10:05

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...