我想将我的画布保存为一个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";
}
出现错误：
未捕获的SecurityError：在“HTMLCanvasElement”上执行“toDataURL”失败：污染的画布不能导出。
我该怎么办？
出于安全考虑，您的本地驱动器被声明为“其他域”，并会影响画布。
（这是因为您最敏感的信息很可能在本地驱动器上！）
在测试时，请尝试以下解决方法：
将所有与页面相关的文件（.html、.jpg、.js、.css 等）放在桌面上（而不是子文件夹中）。
将您的图像发布到支持跨域共享的网站上（如 dropbox.com 或 GitHub）。确保将您的图像放在 Dropbox 的公共文件夹中，并在下载图像时设置 跨源 标志（var img=new Image(); img.crossOrigin="anonymous" ...）
在开发计算机上安装 Web 服务器（IIS 和 PHP Web 服务器都有免费版本，在本地计算机上可以很好地工作）。
在img标签中设置crossorigin属性为Anonymous。
<img crossorigin="anonymous" />
image.crossOrigin = 'Anonymous' 在图像加载完成后无效。但是如果重新加载是一个选项，你可以尝试使用以下代码：document.querySelectorAll('img').forEach(image => { image.crossOrigin = 'Anonymous'; image.src += ' '; })。
有关更多信息，请参阅 MDN 上的这篇文章。 - Rene HamburgercrossOrigin 起作用了。 - Ryan</img> 是什么？已从您的答案中移除。IMG是一个无内容元素，不使用闭合标签。 - Roko C. Buljan如果你正在使用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 导出它。
var baseLayer = new ol.layer.Tile({
name: 'basic',
source: new ol.source.XYZ({
url: options.baseMap.basic,
crossOrigin: "Anonymous"
})
});
import { XYZ } from 'ol/source'
import { Tile as TileLayer } from 'ol/layer'
const baseLayer = new TileLayer({
name : 'basic',
source: new XYZ({
url: 'example.tile.com/x/y/z', // your tile url
crossOrigin: 'Anonymous',
// remove this function config if the tile's src is nothing to decorate. It's usually to debug the src
tileLoadFunction: function(tile, src) {
tile.getImage().src = src
}
})
})
access-control-allow-origin: *或access-control-allow-origin: [您的白名单来源]，如果瓦片是从您自己的服务器请求的。就像这样：
在我的情况下，我正在使用类似 canvas.drawImage(video, 0, 0) 的代码从视频中绘制到画布标签。为了解决污染的画布错误，我需要做两件事：
<video id="video_source" crossorigin="anonymous">
<source src="http://crossdomain.example.com/myfile.mp4">
</video>
crossorigin="anonymous"我使用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();
});
看起来你正在使用一个没有正确设置Access-Control-Allow-Origin标头的URL的图片，因此出现了问题。你可以从自己的服务器获取该图片并从自己的服务器获取它以避免CORS问题。
请查看来自MDN的启用CORS的图像。 基本上，您必须拥有一个托管图像的服务器，并具有适当的Access-Control-Allow-Origin标头。
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
<FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS
</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;
}和 @markE 的回答类似，您可以通过本地服务器来提供网站服务，这样就不会出现此错误。
如果您的计算机上安装了 PHP（某些旧版 MacOS 已经预装）：
php -S localhost:3000如果您的计算机上安装了 Node.js：
npm init -ynpm install live-server -g 或者在 Mac 上运行 sudo npm install live-server -glive-server，它应该会自动在浏览器中打开一个新标签页显示您的网站。注意：请确保您的文件夹根目录下有 index.html 文件，否则可能会遇到一些问题。
php --version 命令来查看您安装的 PHP 版本。 - Ludolfynhttpd.conf文件中，但似乎在旧的操作系统中存在。有一行注释：#PHP was deprecated in macOS 11 and removed from macOS 12。你链接的两篇文章都是错误的。php --version显示command not found，因为php不是Mac的一部分 :) - Lukas Liesis这个可以在 Laravel 中平稳地工作。
首先，您需要将污染的画布转换为Blob。之后，您就可以上传Blob到服务器并将其保存为图像。在ajax调用中返回图像URL。
以下是一个用于上传画布Blob的ajax调用。
$("#downloadCollage").click(function(){
canvas.toBlob(function(blob){
var formDataToUpload = new FormData();
formDataToUpload.append("_token", "{{ csrf_token() }}");
formDataToUpload.append("image", blob);
$.ajax({
url:"{{ route('selfie_collage_upload') }}",
data: formDataToUpload,
type:"POST",
contentType:false,
processData:false,
cache:false,
dataType:"json",
error:function(err){
console.error(err);
},
success:function(data){
window.location.href= data.url;
},
complete:function(){
}
});
},'image/png');
link.click();
});
localhost上尝试一下。 - mehmet