将HTML 5画布保存到Chrome中的文件？

在Firefox中保存PNG（等）this demo，但不支持Chrome。将HTML 5画布保存到Chrome中的文件？

转换为PNG（等）在Firefox和Chrome中工作。

在Chrome *中有一种方法*将画布元素的图像保存到本地文件或服务器上？

2010-05-22 Sam Dutton

最简单的方法是使用toDataURL()函数。

假设你有一个帆布：

var canvas = document.getElementById("myCanvas");

然后，ID为“saveButton”的按钮，你可以把它弹出打开与画布为PNG一个新的窗口，用户可以保存页。

document.getElementById("saveButton").onClick = function() { 
    window.open(canvas.toDataURL()); 
}

来源

2010-05-22 16:47:24

麻烦这个是（从Chrome中）它提供了一个错误： SECURITY_ERR：DOM异常18 我发现这个错误引用（HTTP：//例如，lists.w3.org/Archives/Public/public-webapi/2006May/0027.html），但没有关于是否可能解决它的信息。 – 2010-05-22 17:43:31

我刚刚发现该错误是在本地发生的 - 但如果代码在服务器上运行则不会发生。但是，我仍然在寻找一种方法来提供另存为对话框（就像在Firefox中），而不是在新窗口中打开PNG。 – 2010-05-22 17:57:45

我很确定你不能让保存对话框出现;您可以做的最好的方法是在新选项卡中打开生成的PNG，并让用户保存。这是我在所见过的所有画布应用程序中看到的行为。编辑我对窗口打开的响应。 – 2010-05-22 22:00:59

山姆达顿（左蒂莫西·阿姆斯特朗回答有关评论）的“SECURITY_ERR：DOM异常18”你得到错误可能是因为在你的画布，你已经加载的是来自不同的图像域，例如。也许该图像托管在您的服务器上，因此您为什么在本地看到错误，而不是托管在服务器上的错误。无论何时将图像从外部域加载到Canvas中，都会出于安全原因（如toDataUrl（）和getPixelData（））禁止某些API调用。它与您在跨域Ajax调用中看到的相同的原始策略问题类似。

至于SaveAs Canvas，对于不支持它的浏览器来说，浏览器实现是不稳定的，我相信你仍然可以在一个<img />标记中将该画布显示为一个图像。只需将src属性设置为您从toDataUrl（）返回的数据，然后您就可以邀请用户右键单击 - >另存为。我相信你发布的链接中的演示是这样做的。

来源

2010-05-24 07:25:11

感谢您的意见。 toDataURL（）在本地运行（即不在服务器上）时发生安全性错误。为了构建canvas元素的内容，我使用本地视频文件作为源调用drawImage，即： canvasContext.drawImage（videoEl，0，0，videoWidth/2，videoHeight/2）; – 2010-05-24 13:24:12

你确定视频文件本身是本地的，而不是来自你的服务器？ – 2010-05-25 10:00:54

>>您确定视频文件本身是本地的吗？<< 是的：视频位于本地目录，并通过如下所示的src路径访问：'video/myVideo.ogv'。 – 2010-05-26 05:49:53

这可能会帮助您：Canvas to file

来源

2012-11-26 16:27:03 Stephan

Lone链接不好。 – 2012-11-26 16:46:54

将HTML 5画布保存到Chrome中的文件？

回答

相关问题