我想保存我的画布到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”:受污染的画布可能无法导出。
我该怎么办?
当前回答
对于任何在应用服务器跨源设置后仍然在S3中遇到相同问题的人来说，这可能是浏览器缓存问题。 所以你需要确保禁用缓存并再次测试，你可以从浏览器的dev-tools ->网络选项卡->单击禁用现金选项->重试:
其他回答
似乎您正在使用的图像来自一个URL，没有设置正确的访问控制-允许起源头，因此出现了问题。您可以从您的服务器获取该映像，并从您的服务器获取它以避免CORS问题。
出于安全原因，您的本地驱动器被声明为“other-domain”，并将污染画布。
(这是因为你最敏感的信息可能在你的本地驱动器上!)
在测试时尝试以下变通方法:
Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders). Post your images to a site that supports cross-domain sharing (like dropbox.com or GitHub). Be sure you put your images in dropbox's public folder and also set the cross origin flag when downloading the image (var img=new Image(); img.crossOrigin="anonymous" ...) Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).
在img标签中将crossorigin设置为Anonymous。
<img crossorigin="anonymous" />
我还通过添加useCORS: true解决了这个错误，在我的代码中像-
html2canvas($("#chart-section")[0], {
useCORS : true,
allowTaint : true,
scale : 0.98,
dpi : 500,
width: 1400, height: 900
}).then();
如果有人对我的回答有看法，你可能会有这样的情况:
1. 尝试在画布中使用openlayers获取地图截图(版本>= 3) 2. 并查看了导出map的示例 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"
})
});
在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:[你的白名单起源]，如果瓷砖是在你自己的服务器上请求的。 是这样的: 更多细节，还有这个
