OpenLayers: 'Failed to execute 'toDataURL' on &#

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

本文关键字：toDataURL on execute Failed OpenLayers to      更新时间：2023-09-26

当我尝试导出使用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变量。
当地图由多个关卡组成时，我收到这样的错误:

未捕获的安全错误:未能执行'toDataURL''HTMLCanvasElement':被污染的画布可能无法导出

如果我尝试做同样的事情而不添加级别到地图(只是使用默认的OpenLayer地图)，我能够生成数据URL并以png格式下载地图。
这似乎是一个跨源问题，但CORs应该在我的服务器上启用。
任何帮助吗?谢谢!

编辑
下面是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);

按照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);

跨源问题解决!

您可以查看此文档以查看CORS设置。与其在源代码中将crosorigin设置为''，不如尝试将其设置为anonymous:

crossOrigin: 'Anonymous'

因为我还不能评论，我的答案在这里解决方案是A)设置一个本地代理，并在它的帮助下接收数据b)询问源提供商是否可以激活Cross-Origin-Allow-Header "*"

当您将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"
        })
相关文章：