我想保存我的画布到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:未能在“HTMLCanvasElement”上执行“toDataURL”:受污染的画布可能无法导出。
我该怎么办?
当前回答
我还通过添加useCORS: true解决了这个错误，在我的代码中像-
html2canvas($("#chart-section")[0], {
useCORS : true,
allowTaint : true,
scale : 0.98,
dpi : 500,
width: 1400, height: 900
}).then();
其他回答
就像@mark的回答一样。你可以通过本地服务器服务你的网站。在本地服务器上不会出现此错误。
如果你的电脑上已经安装了PHP(一些较旧的MacOS版本已经预安装了PHP):
打开终端/cmd 导航到你的网站文件所在的文件夹 在此文件夹中，运行命令php -S localhost:3000 打开浏览器，在URL栏中进入localhost:3000。你的网站应该在那里运行。
or
如果你的电脑上安装了Node.js:
打开终端/cmd 导航到你的网站文件所在的文件夹 在这个文件夹中，运行命令npm init -y 在mac上运行npm install live-server -g或sudo npm install live-server -g 运行live-server，它应该会自动在浏览器中打开一个新选项卡，打开你的网站。
注意:记得在文件夹的根目录下有一个index.html文件，否则你可能会遇到一些问题。
在img标签中将crossorigin设置为Anonymous。
<img crossorigin="anonymous" />
出于安全原因，您的本地驱动器被声明为“other-domain”，并将污染画布。
(这是因为你最敏感的信息可能在你的本地驱动器上!)
在测试时尝试以下变通方法:
Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders). 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" ...) Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).
检查从MDN启用的CORS图像。 基本上，你必须有一个服务器托管图像与适当的Access-Control-Allow-Origin头。
< IfModule mod_setenvif c >。 < IfModule mod_headers c >。 < FilesMatch”\。(狗| gif | ico | jpe ? g | png | svgz ? | webp美元)" > “IS_CORS” 标题集access -控制 < / FilesMatch > < / IfModule > < / IfModule >
您将能够将这些图像保存到DOM存储，就像它们是从您的域提供的一样，否则您将遇到安全问题。
var img = new Image, canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"), src = "http://example.com/image"; // insert image url here img.crossOrigin = "Anonymous"; img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage( img, 0, 0 ); localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") ); } img.src = src; // make sure the load event fires for cached images too if ( img.complete || img.complete === undefined ) { img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; img.src = src; }
在我的情况下，我从我的桌面进行测试，即使在本地保存图像到子文件夹后，也有CORS错误。
解决方案:
移动文件夹到本地服务器WAMP在我的情况下。从本地服务器完美工作。
注意: 只有在本地保存图像时才有效。
