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

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.

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

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).

Note that the crossOrigin option should be a String, not a Boolean.

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

Question

1 answers

solution1
0 ACCPTED 2015-09-10 06:04:04

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

Question

1 answers

solution1 0 ACCPTED 2015-09-10 06:04:04

solution1
0 ACCPTED 2015-09-10 06:04:04