OpenLayers：'无法在 'HTMLCanvasElement' 上执行 'toDataURL'

Question

当我尝试导出具有使用 OpenLayer 创建的多层的地图时遇到问题。
这是我的 JS 代码：

map.once('postcompose', function(event) {
       var img = new Image,
       canvas = event.context.canvas;

       img.crossOrigin = "anonymous";
       img.src = canvas.toDataURL('image/png');
});

其中 map 是我的 OpenLayers 地图的 JavaScript 变量。
当地图由不止一层组成时，我收到这种错误：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

如果尝试在不向地图添加级别（仅使用默认的 OpenLayer 地图）的情况下做同样的事情，我能够生成数据 URL 并以 png 格式下载地图。
这似乎是一个 CrossOrigin 问题，但应该在我的服务器上启用了 COR。
有什么帮助吗？谢谢！

编辑
这是 JS 代码示例，我在其中将图层添加到导致此问题的地图。

var layer = new ol.layer.Image({
     source: new ol.source.ImageWMS({
        url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
        params: {
                'LAYERS': 'layer_name',
                'FORMAT': 'image/png',
                'TRANSPARENT': 'true'
        },
        crossOrigin: null
     })
});
map.addLayer(layer);

Answer 1

由于我还不能发表评论，所以我的回答在这里解决方案是 a) 设置本地代理并在其帮助下接收数据 b) 询问源提供者是否可以激活 Cross-Origin-Allow-Header "*"。

Answer 2

我按照 MichaelJS 的建议解决了在我的服务器上实施本地代理的问题。
我是运行一个 Django 应用程序，所以我从这段代码开始开发了一个自定义代理：
https://github.com/mjumbewu/django-proxy

然后在我的 urls.py 中定义了这条规则：

url(r'^proxy/(?P<url>.*)$', views.proxy_view, name='proxy'),

最后我将请求代理到 WMS 服务，以这种方式更改 JS 代码：

var layer = new ol.layer.Image({
     source: new ol.source.ImageWMS({
        url: '/proxy/http://pubblicazioni.provincia.fi.it/geoserver/wms',
        params: {
                'LAYERS': 'layer_name',
                'FORMAT': 'image/png',
                'TRANSPARENT': 'true'
        },
        crossOrigin: null
     })
});
map.addLayer(layer);

跨域问题已解决！

Answer 3

您可以查看 this document 以查看 CORS 设置。您可以尝试将其设置为匿名，而不是将源代码中的 crossOrigin 设置为 ''：

crossOrigin: 'Anonymous'

Answer 4

当您将 wms 图层图像加载到地图中但此 wms 图层加载了一些 CORS 不安全的第三方图像时，可能会发生这种情况。浏览器的安全行为禁止下载受污染的图像。为避免污染 canvas 将 crossOrigin: "anonymous" 这条线放入您的底图中。请参阅以下示例：

    new ol.layer.Tile({
        title: 'Périmètres des PPR Inondation',
        type: 'base',
        visible: false,
        zIndex: 1000,
        source: new ol.source.TileWMS({
        url: wmsperi,
        params: {'LAYERS': 'PPRN_PERIMETRE_INOND', 'TILED': true, 'CRS': 'EPSG:3857'},
        crossOrigin: "anonymous"
        })

OpenLayers：'无法在 'HTMLCanvasElement' 上执行 'toDataURL'

OpenLayers: 'Failed to execute 'toDataURL' on 'HTMLCanvasElement'

javascript

dictionary

canvas

wms

openlayers-3