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

Question

I have OSM as a base layer in my application and on top of that I have few map layers that come from my local geoserver. 我将OSM用作应用程序的基础层，最重要的是，我的本地Geoserver中还包含一些地图层。

Now I need to print those layers and I have a layer control tool from which I can enable and disable layers. 现在，我需要打印这些图层，并且有了一个图层控制工具，可以从中启用和禁用图层。

If I remove all the layers from my local geoserver I can print (if only OSM layer is there) using html2canvas. 如果我从本地地理服务器中删除了所有图层，则可以使用html2canvas进行打印（如果只有OSM图层）。 But if layers from my local geoserver are visible I can't print. 但是，如果本地地理服务器中的图层可见，则无法打印。

Here is my complete code: 这是我完整的代码：

<!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>

Can anyone suggest what is wrong here? 有人可以在这里提出什么问题吗？ I am using html2canvasproxy.php in my application. 我在我的应用程序中使用html2canvasproxy.php。 But still I can't print the layers. 但是我仍然无法打印图层。

This is the Message that I get: 这是我收到的消息：

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

I get the image with openlayers zoom icons but no image, just gery image, but I have OSM as background and some layers on top of it. 我得到带有openlayers缩放图标的图像，但没有图像，只有非常粗糙的图像，但是我将OSM作为背景，并在其顶部添加了一些图层。

AJ AJ

Answer 1

This looks like a cross origin issue. 这看起来像是跨源问题。 You can solve it through properly configuring CORS headers from the server and the crossOrigin option, or by serving your tiles from the same host (natively or by proxy). 您可以通过从服务器和crossOrigin选项正确配置CORS标头，或通过从同一主机（本机或通过代理）提供图块来解决此问题。

Note that the crossOrigin option should be a String, not a Boolean. 请注意， crossOrigin选项应为字符串，而不是布尔值。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-09-10 06:04:04

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-09-10 06:04:04

解决方案1
0 已采纳 2015-09-10 06:04:04