受污染的画布不得出口

2022-01-17 00:00:00 javascript html5-canvas

我想将我的画布保存到 img.我有这个功能:

I want to save my canvas to a img. I have this function:

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":可能无法导出受污染的画布.

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

我该怎么办?

推荐答案

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

For security reasons, your local drive is declared to be "other-domain" and will taint the canvas.

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

(That's because your most sensitive info is likely on your local drive!).

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

While testing try these workarounds:

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

  • Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders).

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

Post your images to a site that supports cross-domain sharing (like dropbox.com or GitHub). Be sure you put your images in dropbox's public folder and also set the cross origin flag when downloading the image (var img=new Image(); img.crossOrigin="anonymous" ...)

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

Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).

相关文章