從本地Geoserver和osm層打印wms層作為背景時出現OL3和html2canvas錯誤

Question

我將OSM用作應用程序的基礎層，最重要的是，我的本地Geoserver中還包含一些地圖層。

現在，我需要打印這些圖層，並且有了一個圖層控制工具，可以從中啟用和禁用圖層。

如果我從本地地理服務器中刪除了所有圖層，則可以使用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縮放圖標的圖像，但沒有圖像，只有非常粗糙的圖像，但是我將OSM作為背景，並在其頂部添加了一些圖層。

AJ

Answer 1

這看起來像是跨源問題。 您可以通過從服務器和crossOrigin選項正確配置CORS標頭，或通過從同一主機（本機或通過代理）提供圖塊來解決此問題。

請注意， 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