Question

目前我使用Canvas2Image来保存HTML5画布的内容。但是，它似乎无法在Google Chrome中使用。关于如何解决这个问题的任何想法都是受欢迎的。：）

Answer 1

canvas.toDataURL()似乎在Chrome中运行良好，因此可能是库问题。但是，“将画布转换为图像”功能似乎可行。

Answer 2

使用此代码

<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>

下载这些canvas2image.js和base64.js并将其保存在本地文件夹中以便使用此代码。

这些将在网站上提供 http://www.nihilogic.dk/labs/canvas2image/

Answer 3

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

Answer 4

是的，我做到了！ =）

查看www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/CanvasBox.js?rev=239#ln1235。您可以在http://www.thiagomata.com/codetodiagram/svn/experimental/canvasBox/classDiagram/classDiagram.html上看到它正在运行。

为了使图像不显示在浏览器中，但作为一个donwload，我需要创建这个简单的php文件：www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/download.php?rev=23 9

我需要在浏览器中创建一个close.html，在下载开始后不要保留about：blank页面www.assembla.com/code/codetodiagram/subversion/nodes/experimental/canvasBox/default/close.html?rev=239

我会在thiagomata.blog.com上发表一篇关于它的重要帖子，但我认为通过这些文件你已经能够找到方法了。

也许，如果您将来阅读此帖子，thiagomata.com链接可能会被破坏，因为我很快就会将此项目迁移到codetodiagram.com。

就是这样！蒂亚戈马塔

如何保存HTML5画布？

4 个答案: