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

Posted 2023-03-05

【中文标题】将 HTML 5 画布保存到 Chrome 中的文件？

【英文标题】：Save HTML 5 canvas to a file in Chrome?

【发布时间】：2011-02-22 17:55:49

【问题描述】：

保存 PNG（等）在 Firefox 中的 this demo 中工作，但不是 Chrome。

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

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

【参考方案1】：

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

假设你有一个画布：

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

然后，使用 id 为“saveButton”的按钮，您可以让它弹出一个新窗口，其中画布为 png，用户可以保存该页面。

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

【讨论】：

问题在于（来自 Chrome）它给出了一个错误：SECURITY_ERR: DOM Exception 18。我找到了对这个错误的引用（例如lists.w3.org/Archives/Public/public-webapi/2006May/0027.html），但没有关于是否（或不）有可能绕过它。

我刚刚发现错误发生在本地——但如果代码在服务器上运行则不会。但是，我仍在寻找一种方法来提供另存为对话框（如在 Firefox 中），而不仅仅是在新窗口中打开 PNG。

我很确定你不能让保存对话框出现；您能做的最好的事情是在新标签中打开生成的 PNG 并让用户保存。这是我在我见过的所有画布应用程序中看到的行为。编辑了我对打开窗口的回复。

或者您可以使用服务器端将文件保存在您的计算机上。这就是 Zwibbler 对他们的画布保存所做的：zwibbler.com 如果您再等一会儿，HTML5 FileAPI 将允许您进行磁盘保存。

我知道这不是问题的一部分，但是有没有人让它在 IE9 中工作？

【参考方案2】：

Sam Dutton：（关于 Timothy Armstrong 的回答中留下的评论）您收到的“SECURITY_ERR: DOM Exception 18”错误可能是因为您在 Canvas 中加载了来自不同域的图像，例如。也许图像托管在您的服务器上，因此为什么您在本地看到错误，但在托管在您的服务器上时却没有。每当您将来自外部域的图像加载到 Canvas 中时，出于安全原因，某些 API 调用将被禁止，例如 toDataUrl() 和 getPixelData()。这类似于您在跨域 Ajax 调用中看到的相同源策略问题。

至于 SaveAs Canvas，浏览器实现参差不齐，对于不支持它的浏览器，我相信您仍然可以让画布在 <img /> 标记内显示为图像。只需将 src 属性设置为您从 toDataUrl() 获取的数据，然后您可以邀请用户右键单击 -> 另存为。我相信您发布的链接中的演示可以做到这一点。

【讨论】：

感谢您的 cmets。当 toDataURL() 在本地运行（即不在服务器上）时，会发生安全“错误”。为了构建画布元素的内容，我使用本地视频文件作为源调用 drawImage，即：canvasContext.drawImage(videoEl, 0, 0, videoWidth / 2, videoHeight / 2);

您确定视频文件本身是本地的，而不是来自您的服务器吗？

>> 你确定视频文件本身是本地的

当前在 Firefox 中，当使用文件协议 'file:..' 时会抛出 'SECURITY_ERR'，但这是一个错误 - 请参阅 bugzilla.mozilla.org/show_bug.cgi?id=444641 为避免此异常，您可以简单地运行您本地 Apache 上的页面。但是您在使用 Chrome 时遇到了这个问题？