我想将我的画布保存到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";
}
它给了我错误：
未捕获的安全错误：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。
我该怎么办？
出于安全原因，您的本地驱动器被声明为“其他域”并且会污染画布。
（那是因为您最敏感的信息可能在您的本地驱动器上！）。
在测试时尝试以下解决方法：
将所有与页面相关的文件（.html、.jpg、.js、.css 等）放在桌面上（而不是在子文件夹中）。
将您的图像发布到支持跨域共享的站点（如 dropbox.com 或 GitHub）。确保将图像放在 dropbox 的公共文件夹中，并在下载图像时设置交叉原点标志 ( var img=new Image(); img.crossOrigin="anonymous"...)
在您的开发计算机上安装一个网络服务器（IIS 和 PHP 网络服务器都有免费版本，可以在本地计算机上很好地运行）。
在 img 标签中将 crossorigin 设置为 Anonymous。
<img crossorigin="anonymous"></img>
如果有人对我的回答有意见，您可能处于这种情况：
1. 尝试使用 openlayers (version >= 3) 在 canvas 中获取地图截图
2. 并查看导出地图的示例
3. 使用 ol.source.XYZ 渲染地图层
答对了！
使用ol.source.XYZ.crossOrigin = 'Anonymous'来解决您的困惑。或者像下面的代码：
var baseLayer = new ol.layer.Tile({
name: 'basic',
source: new ol.source.XYZ({
url: options.baseMap.basic,
crossOrigin: "Anonymous"
})
});
在 OpenLayers6 中，ES6 有所改变。但是，代码是相似的。
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: [your whitelist origins] 。
像这样：
更多细节，还有这个
如果您正在使用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
就我而言，我正在从带有类似canvas.drawImage(video, 0, 0). 为了解决受污染的画布错误，我必须做两件事：
<video id="video_source" crossorigin="anonymous">
<source src="http://crossdomain.example.com/myfile.mp4">
</video>
crossorigin="anonymous"