从本地地理服务器和 osm 层打印 wms 层作为背景时出现 OL3 和 html2canvas 错误

Question

我的应用程序中有 OSM 作为基础层，除此之外，我有几个来自本地地理服务器的地图层。

现在我需要打印这些图层，我有一个图层控制工具，我可以从中启用和禁用图层。

如果我从我的本地地理服务器中删除所有图层，我可以使用 html2canvas 打印（如果只有 OSM 图层）。但是，如果我的本地地理服务器中的图层可见，我将无法打印。

这是我的完整代码：

<!DOCTYPE html>
<html>
<head>
<title>Export map example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

</head>
<body>
<div class="container-fluid">

<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
    <div id="no-download" class="alert alert-error" style="display: none">
      This example requires a browser that supports the
      <a href="http://caniuse.com/#feat=download">link download</a> attribute.
    </div>
    <a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
  </div>
</div>

</div>
<script>
var baseLayerGeryBoundary = new ol.layer.Tile({
    source: new ol.source.TileWMS(({
          url: 'http://localhost:8080/geoserver/mydata/wms',
          params: {'LAYERS': 'mydata:Road'},
          serverType: 'geoserver'
        })),
        name: 'Road Boundary',
        isBaseLayer:false,
        crossOrigin:true,
        visible:true
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'data/geojson/countries.geojson',
        format: new ol.format.GeoJSON()
      })
    }),
    baseLayerGeryBoundary
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

var exportPNGElement = document.getElementById('export-png');

if ('download' in exportPNGElement) {
  exportPNGElement.addEventListener('click', function(e) {
    convert(document.getElementById('map'));
  }, false);
} else {
  var info = document.getElementById('no-download');
  /**
   * display error message
   */
  info.style.display = '';
}



        function convert(target) {
            html2canvas(target, {
                "proxy": "html2canvasproxy.php",
                "logging": true, //Enable log (use Web Console for get Errors and Warnings)
                "onrendered": function(canvas) {
                    var img = new Image();
                        var url = canvas.toDataURL("image/png");
                        window.open(url, "_blank");
                    }
            });
        }
</script>
</body>
</html>

谁能指出这里出了什么问题？我在我的应用程序中使用 html2canvasproxy.php。但是我还是无法打印图层。

这是我收到的消息：

html2canvas: Preload starts: finding background-images html2canvas.min.js:7:2811
html2canvas: Preload: Finding images html2canvas.min.js:7:2811
html2canvas: Preload: Done. html2canvas.min.js:7:2811
html2canvas: start: images: 1 / 1 (failed: 0) html2canvas.min.js:7:2811
Finished loading images: # 1 (failed: 0) html2canvas.min.js:7:2811
html2canvas: Renderer: Canvas renderer done - returning canvas obj html2canvas.min.js:7:2811

我得到的图像带有 openlayers 缩放图标，但没有图像，只有 gery 图像，但我有 OSM 作为背景，上面有一些图层。

阿杰

Answer 1

这看起来像是跨源问题。您可以通过从服务器正确配置 CORS headers 和 crossOrigin 选项来解决它，或者通过从同一主机（本地或通过代理）提供您的磁贴。

请注意 crossOrigin 选项应该是字符串，而不是布尔值。

从本地地理服务器和 osm 层打印 wms 层作为背景时出现 OL3 和 html2canvas 错误

OL3 and html2canvas error while printing wms layer from local geoserver and osm layer as background

openlayers-3