我想保存我的画布到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”:受污染的画布可能无法导出。
我该怎么办?
当前回答
在我的例子中，我从一个视频中用画布之类的东西画在一个画布标签上。为了解决受污染的画布错误，我必须做两件事:
<video id="video_source" crossorigin="anonymous">
<source src="http://crossdomain.example.com/myfile.mp4">
</video>
确保在视频源响应中设置了Access-Control-Allow-Origin头(正确设置crossdomain.example.com) 设置视频标签为crossorigin="anonymous"
其他回答
如果你正在使用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导出它
检查从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; }
对于任何在应用服务器跨源设置后仍然在S3中遇到相同问题的人来说，这可能是浏览器缓存问题。 所以你需要确保禁用缓存并再次测试，你可以从浏览器的dev-tools ->网络选项卡->单击禁用现金选项->重试:
在我的情况下，我从我的桌面进行测试，即使在本地保存图像到子文件夹后，也有CORS错误。
解决方案:
移动文件夹到本地服务器WAMP在我的情况下。从本地服务器完美工作。
注意: 只有在本地保存图像时才有效。
我使用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();
});
