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

标签： html5 save html5-canvas

4条回答

在下西门庆

2楼-- · 2019-03-09 17:29

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

0人赞添加讨论(0) 举报

三岁会撩人

3楼-- · 2019-03-09 17:42

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) 举报

时光不老，我们不散

4楼-- · 2019-03-09 17:43

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) 举报

啃猪蹄的小仙女

5楼-- · 2019-03-09 17:51

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) 举报

How to save HTML5 canvas?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间