将HTML5画布保存到Chrome文件?

最简单的方法是使用 toDataURL() 功能。

假设你有一张画布:

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

然后,使用ID为“save button”的按钮,您可以使它弹出,打开一个新窗口,画布为png,用户可以保存该页面。

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

Sam Dutton:(关于Timothy Armstrong回答中留下的评论)您得到的“security-err:dom exception 18”错误可能是因为在画布中您加载了来自不同域的图像,例如,图像可能托管在您的服务器上,因此您在本地看到错误,但在服务器上却看不到错误。每当您将外部域中的图像加载到画布中时,出于安全原因(如todataurl()和getpixeldata())禁止某些API调用。这类似于跨域Ajax调用中的同一个源站策略问题。

至于saveas canvas,浏览器实现是参差不齐的,对于不支持它的浏览器,我相信您仍然可以让画布在 <img /> 标签。只需将src属性设置为从todataurl()返回的数据,然后可以邀请用户右键单击->另存为。我相信你发布的链接中的演示会做到这一点。

这可以帮助您: Canvas to file