openlayers wms 和 canvas toDataURL的跨域问题

项目有个需求要把openlayers的地图转成base64用来导出,本来以为可以和echarts一样,用canvas的toDataURL就简单解决了,结果给我报了这个错误:

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

原来是跨域了,而echarts生成的canvas不存在跨域的图片当然可以用toDataURL。网上查到的解决方法是添加crossOrigin:

new ol.source.TileWMS({
   crossOrigin: 'anonymous'
   //...
})

这里的crossOrigin有两种值可配置,anonymous和use-credentials,只要crossOrigin的属性值不是use-credentials,全部都会解析为anonymous,所以有的地方会写成crossOrigin: ”。

满心欢喜的以为解决了,结果页面又报了这个错:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

意思就是响应头里没有Access-Control-Allow-Origin这个参数,那为啥openlayers官网的例子可以导出呢?看了下官网瓦片图的响应头,还真的有下面的参数:

access-control-allow-origin: *

还是让后台帮忙改下geoServer配置吧。

转载自:https://blog.csdn.net/shengandshu/article/details/80576428

You may also like...