受污染的canvas不得出口
我想保存我的canvas到img。 我有这个function：
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”：受污染的canvas可能无法导出。
我该怎么办？
出于安全原因，您的本地驱动器被声明为“其他域”，并会污染canvas。
（这是因为你最敏感的信息可能在你的本地驱动器！）。
在testing时尝试这些解决方法：
-
将所有页面相关的文件（.html，.jpg，.js，.css等）放到桌面上（不要放在子文件夹中）。
-
将您的图片发布到支持跨域共享的网站（如dropbox.com）。 一定要把你的图片放在收件箱的公共文件夹中，并且在下载图片的时候也要设置十字原点标志（var img = new Image（）; img.crossOrigin =“anonymous”…）
-
在您的开发计算机上安装一个networking服务器（IIS和PHPnetworking服务器都有可以在本地计算机上正常工作的免费版本）。
在img标签中将交叉原点设置为匿名
<img crossOrigin="Anonymous"></img>
似乎你正在使用一个没有设置正确的访问控制，允许源标题的URL的图像，因此，问题..您可以从您的服务器获取该图像，并从您的服务器获取它，以避免CORS问题..
如果有人查看我的答案，你可能在这种情况下：
1.尝试使用openlayers 3或4在canvas中获取地图截图
2.查看导出地图的例子
3.使用ol.source.XYZ渲染地图图层
答对了！
使用ol.source.XYZ.crossOrigin ='匿名'来解决你的困惑。 或者像下面的代码：
var baseLayer = new ol.layer.Tile({ name: 'basic', source: new ol.source.XYZ({ url: options.baseMap.basic, 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; }
而在你的callback中，你现在可以使用ctx.drawImage并使用ctx.drawImage将其toDataURL
