受污染的画布不得出口

Question

我想将我的画布保存到 img 。我有这个功能：

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

它给了我错误：

未捕获的安全错误：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

我应该怎么办？

原文由 user3465096 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

出于安全原因，您的本地驱动器被声明为“其他域”并且会污染画布。

（那是因为您最敏感的信息可能在您的本地驱动器上！）。

在测试时尝试以下解决方法：

• 将所有与页面相关的文件（.html、.jpg、.js、.css 等）放在桌面上（而不是放在子文件夹中）。

• 将您的图片发布到支持跨域共享的网站（如 dropbox.com 或 GitHub）。确保将图像放在 Dropbox 的公用文件夹中，并在下载图像时设置交叉原点标志（ var img=new Image(); img.crossOrigin="anonymous" …）

• 在您的开发计算机上安装一个网络服务器（IIS 和 PHP 网络服务器都有免费版本，可以在本地计算机上很好地工作）。

原文由 markE 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 img 标签中将 crossorigin 设置为 Anonymous。

 <img crossorigin="anonymous" />

原文由 Annia Martinez 发布，翻译遵循 CC BY-SA 4.0 许可协议