javascript - 在 OpenLayers 示例中调用 domtoimage.toPng() 时出现 "SecurityError: This operation is insecure"

Question

我目前正在努力添加将 OpenLayers map 转换为 png 文件的功能(示例为 here )。但是，当在下面的代码中调用 domtoimage.toPng() 时，Firefox(Ubuntu 版本 68.0.2)给我错误 SecurityError: 此操作不安全。我已经检查了所有地方，似乎没有其他人遇到 dom-to-image 库的这个问题，所以我陷入了如何修复这个错误的困境。我的 map JavaScript 代码与示例中给出的代码非常相似，如下所示:

<script type="text/javascript">

var extent = [0, 0, 3000, 4213];
var projection = new ol.proj.Projection({
    code: 'my-image',
    units: 'pixels',
    extent: extent,
});
var map = new ol.Map({
    controls: ol.control.defaults().extend([
        new ol.control.FullScreen()
    ]),
    layers: [
        new ol.layer.Image({
            source: new ol.source.ImageStatic({
                attributions: 'My Image Attributions',
                url: "{{record | img_url}}", // Django stuff defined earlier
                projection: projection,
                imageExtent: extent
            })
        })
    ],
    target: 'map', 
    view: new ol.View({ 
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 2, 
        maxZoom: 8
    })
});

map.addOverlay(new ol.Overlay({
    position: [0, 0],
    element: document.getElementById('null')
}));


// export options for dom-to-image.
var exportOptions = {
    filter: function(element) {
        return element.className ? element.className.indexOf('ol-control') === -1 : true;
    }
};

document.getElementById('export-png').addEventListener('click', function() {
    map.once('rendercomplete', function() {
        domtoimage.toPng(map.getTargetElement(), exportOptions)
            .then(function(dataURL) {
                var link = document.getElementById('image-download');
                link.href = dataURL;
                link.click();
            });
    });
    map.renderSync();
});

HTML 实际上与示例中的相同，因此我相信问题出在此处。也许与在 map 中使用静态图像有关？或者也许通过 Django 框架以某种未知的方式篡改了它？我不完全确定，非常感谢任何解决此问题的诊断/帮助。

Answer 1

我认为应该是这样的:

new ol.layer.Tile({
    name: 'name',
    source: new ol.source.TileWMS({
        ...
        crossOrigin: 'anonymous' // <-- Add this to the json.
    })
})

Read more:

https://openlayers.org/en/v4.6.5/apidoc/ol.source.ImageWMS.html https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image