题
目前我正在使用 画布2图像 保存 HTML5 画布的内容。然而,它似乎不适用于 Google Chrome。欢迎任何有关如何解决该问题的想法。:)
解决方案
canvas.toDataURL()
似乎在Chrome工作很好,所以它可能是一个库的问题。 “转换画布图像”功能似乎工作,虽然。
其他提示
使用此代码
<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并将其保存在本地文件夹中该代码的工作。
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var strDataURI = canvas.toDataURL("image/png;base64");
document.write('<img src="'+strDataURI+'"/>');
我做到了!=)
看看 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。
就是这样!蒂亚戈·马塔