Openlayers Print Function

Question

I would like to create a print button for my Openlayers map, which captures a map image and creates a nice image file. I tried http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html but it seams like an experimental one. I also looked at http://trac.osgeo.org/openlayers/wiki/Printing but I don't want any server to be involved. I also checked http://html2canvas.hertzen.com/ , but couldn't get it working. I get the following error: Uncaught TypeError: Unable to read the 'images' properties from undefined, html2canvas.js

<button onclick="printFunction()">Click me</button> function printFunction() { html2canvas(('#map'), { onrendered: function (canvas) { var img = canvas.toDataURL("image/png") window.open(img); } }); }; 

Answer 1

Try

 function printFunction() { html2canvas(document.getElementById("map"), { onrendered: function (canvas) { var img = canvas.toDataURL("image/png") window.open(img); } }); 

This works for me. Hashtag authentication only works for jQuery, it took me a while to figure it out :-)

However, there is a small problem. Html2canvas did not display the background WMS layer — only the map window and markers, so some configuration needs to be done.

Update : I worked a bit with this and I don't think it will work with openlayers. Since the openlayers map is a composition of many divs, it seems that html2canvas is not able to display all of them correctly. In particular, the WMS level, which when trying to do it by itself returns an error. You can try to make one of the child divs on the map, but this did not work for me. Although, if you use only simple vector graphics, this may work for you.

Answer 2

Well, I spent a few hours on it now, and the best I came up with is amplifying @ Kenny806's answer, which is basically this .

It seems to take away the WMS and vector layers:

  function exportMap() { var mapElem = document.getElementById('map'); // the id of your map div here // html2canvas not able to render css transformations (the container holding the image tiles uses a transform) // so we determine the values of the transform, and then apply them to TOP and LEFT var transform=$(".gm-style>div:first>div").css("transform"); var comp=transform.split(","); //split up the transform matrix var mapleft=parseFloat(comp[4]); //get left value var maptop=parseFloat(comp[5]); //get top value $(".gm-style>div:first>div").css({ //get the map container. not sure if stable "transform":"none", "left":mapleft, "top":maptop, }); html2canvas(mapElem, { useCORS: true, onrendered: function(canvas) { mapImg = canvas.toDataURL('image/png'); // reset the map to original styling $(".gm-style>div:first>div").css({ left:0, top:0, "transform":transform }); // do something here with your mapImg // eg I then use the dataURL in a pdf using jsPDF... // createPDFObject(); } }); } 

Notes

• Tested only on Chrome and Firefox
• This is a hacker solution (unfortunately, I'm struggling to find other options for my situation).
• If you have the ability to use Openlayers 3, there seems to be better canvas support, and I also saw a compelling toBlob example: http://codepen.io/barbalex/pen/raagKq

Answer 3

WMS draw works fine, but you need to implement a proxy to load WMS plates using AJAX. See the PHP proxy example for html2canvas for implementation details of the "proxy" (which is not an http proxy).