javascript - 受污染的 Canvas 不得导出

Question

我想将我的 Canvas 保存到 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";
}

它给我错误:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我该怎么办？

Answer 1

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

(那是因为您最敏感的信息可能在您的本地驱动器上!)。

在测试时尝试这些解决方法:

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

• 将您的图片发布到支持跨域共享的网站(例如 dropbox.com 或 GitHub)。确保将图像放在保管箱的公共(public)文件夹中，并设置 cross origin下载图像时标记 (var img=new Image(); img.crossOrigin="anonymous" ...)

• 在您的开发计算机上安装网络服务器(IIS 和 PHP 网络服务器都有免费版本，可以在本地计算机上很好地运行)。