OpenLayers:''HTMLCanvasElement'

时间:2015-07-07 21:27:40

标签: javascript canvas dictionary openlayers-3 wms

当我尝试导出使用OpenLayer创建的多个图层的地图时,我遇到了问题 这是我的JS代码:

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

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

地图是我的OpenLayers地图的JavaScript变量 当地图由多个级别组成时,我收到这种错误:

  

Uncaught SecurityError:无法执行'toDataURL'   'HTMLCanvasElement':可能无法导出受污染的画布

如果尝试在不向地图添加级别的情况下执行相同的操作(仅使用默认的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);

5 个答案:

答案 0 :(得分: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);

CrossOrigin问题已解决!

答案 1 :(得分:0)

由于我无法评论,我的回答在这里 解决方案是 a)设置本地代理并在其帮助下接收数据 b)询问源提供者是否可以激活Cross-Origin-Allow-Header&#34; *&#34;。

答案 2 :(得分:0)

如果您使用的是OpenLayers 3,则以下链接可以为您提供帮助:http://openlayers.org/en/v3.0.0/examples/export-map.html

答案 3 :(得分:0)

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

crossOrigin: 'Anonymous'

答案 4 :(得分:0)

当您将wms图层图像加载到地图中但此wms图层加载一些CORS不安全的第三方图像时,可能会发生这种情况。是来自浏览器的安全行为,无法下载受污染的图像。为了避免弄脏画布,请将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"
        })