我想保存我的画布到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”:受污染的画布可能无法导出。
我该怎么办?
当前回答
似乎您正在使用的图像来自一个URL，没有设置正确的访问控制-允许起源头，因此出现了问题。您可以从您的服务器获取该映像，并从您的服务器获取它以避免CORS问题。
其他回答
我使用useCORS: true选项解决了这个问题
html2canvas(document.getElementsByClassName("droppable-area")[0], { useCORS:true}).then(function (canvas){
var imgBase64 = canvas.toDataURL();
// console.log("imgBase64:", imgBase64);
var imgURL = "data:image/" + imgBase64;
var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_"+new Date().getTime()+".jpeg").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
});
就像@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文件，否则你可能会遇到一些问题。
如果你正在使用ctx.drawImage()函数，你可以做以下事情:
var img = loadImage('../yourimage.png', callback);
function loadImage(src, callback) {
var img = new Image();
img.onload = callback;
img.setAttribute('crossorigin', 'anonymous'); // works for me
img.src = src;
return img;
}
在你的回调中，你现在可以使用ctx。drawImage并使用toDataURL导出它
我还通过添加useCORS: true解决了这个错误，在我的代码中像-
html2canvas($("#chart-section")[0], {
useCORS : true,
allowTaint : true,
scale : 0.98,
dpi : 500,
width: 1400, height: 900
}).then();
在我的例子中，我从一个视频中用画布之类的东西画在一个画布标签上。为了解决受污染的画布错误，我必须做两件事:
<video id="video_source" crossorigin="anonymous">
<source src="http://crossdomain.example.com/myfile.mp4">
</video>
确保在视频源响应中设置了Access-Control-Allow-Origin头(正确设置crossdomain.example.com) 设置视频标签为crossorigin="anonymous"
