"SecurityError: This operation is insecure" when calling domtoimage.toPng() in OpenLayers example

Question

我目前正在努力添加将 OpenLayers 地图转换为 png 文件的功能（示例为 here）。但是，在下面的代码中调用 domtoimage.toPng() 时，Firefox（Ubuntu 版本 68.0.2）给我错误 SecurityError: This operation is insecure。我已经全面检查过了，似乎没有其他人遇到 dom-to-image 库的这个问题，所以我一直在研究如何修复这个错误。我的 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 实际上与示例中的相同，因此我认为问题出在此处。也许是在地图中使用静态图像？或者也许通过 Django 框架以某种未知的方式篡改它？我不完全确定，如果 diagnosis/help 解决了这个问题，我们将不胜感激。

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

"SecurityError: This operation is insecure" when calling domtoimage.toPng() in OpenLayers example

"SecurityError: This operation is insecure" when calling domtoimage.toPng() in OpenLayers example

javascript

django

dom

openlayers