受污染的画布不得导出

javascript html5-canvas

2022-08-30 00:18:58

我想将画布保存到 .我有这个功能：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”：可能无法导出受污染的画布。

我该怎么办？

答案 1

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

（这是因为您最敏感的信息可能位于本地驱动器上！

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

将所有与页面相关的文件（.html，.jpg，.js，.css等）放在桌面上（而不是子文件夹中）。
将您的图片发布到支持跨网域共享的网站（如 dropbox.com 或 GitHub）。确保将图像放在 Dropbox 的公共文件夹中，并在下载图像时设置跨域标志（ ...）var img=new Image(); img.crossOrigin="anonymous"
在开发计算机上安装 Web 服务器（IIS 和 PHP Web 服务器都有免费版本，可在本地计算机上很好地工作）。

答案 2

在 img 标记中，将 crossorigin 设置为 Anonymous。

<img crossorigin="anonymous" />