[英]OpenLayers: 'Failed to execute 'toDataURL' on 'HTMLCanvasElement'
当我尝试导出具有使用 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 变量。
当地图由多个级别组成时,我收到这种错误:
未捕获的安全错误:无法在“HTMLCanvasElement”上执行“toDataURL”:可能无法导出受污染的画布
如果尝试在不向地图添加级别的情况下执行相同的操作(仅使用默认的 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);
我按照 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);
跨域问题解决了!
由于我还不能发表评论,我在这里的答案是 a) 设置本地代理并在其帮助下接收数据 b) 询问源提供商是否可以激活 Cross-Origin-Allow-Header "*"。
您可以查看此文档以查看 CORS 设置。 您可以尝试将源中''
crossOrigin 设置为''
,而不是将其设置为匿名:
crossOrigin: 'Anonymous'
当您将 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"
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.