如何保存 HTML5 画布？答案

【问题标题】：How to save HTML5 canvas?如何保存 HTML5 画布？
【发布时间】：2011-02-02 09:48:54
【问题描述】：

目前我正在使用Canvas2Image 来保存我的 HTML5 画布的内容。但是，它似乎不适用于 Google Chrome。欢迎任何关于如何解决该问题的想法。 :)

【问题讨论】：

【解决方案1】：

是的，我做到了！ =)

查看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 上运行。

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

我需要为浏览器创建一个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。

就是这样！蒂亚戈·马塔

【讨论】：

感谢分享您的方法！

【解决方案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/

【讨论】：

有趣的方法，但您无法选择文件名，还是我遗漏了什么？
是的！但是我在 Chrome 中运行时无法选择名称。但是 Firefox 浏览器会提示输入文件名来保存它。这个怎么解决？？
在我的例子中，Firefox 要求保存文件，而不是更改文件名。 Chrome 和 IE (HTML5) 的一种解决方法是：stackoverflow.com/questions/3906142/…。 Firefox 尚无解决方案。

【解决方案3】：

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

【讨论】：

【解决方案4】：

canvas.toDataURL() 在 Chrome 中似乎可以正常工作，因此可能是库问题。不过，“将画布转换为图像”功能似乎可以正常工作。

【讨论】：

好的。该库使用 toDataUrl 和“document.location.href”来提供保存对话框。 Chrome 显然不支持“document.location.href”。
这方面的任何进展：是否可以像 Firefox 一样在 Chrome 中获得另存为...对话框？