Openlayers Print Function

Question

I would like to create a print button for my Openlayers map which grabs the map image and creates a nice image file. I have tried http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html but it seams like it is experimental. I have also looked at http://trac.osgeo.org/openlayers/wiki/Printing but I don't want any server involved. I also checked out http://html2canvas.hertzen.com/ but can't get it to work. I get the following error, Uncaught TypeError: Cannot read property 'images' of 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. The hashtag identification only works for jQuery, took me a while to figure that out :-)

There is a slight problem though. The html2canvas did not render the background WMS layer - only the map window and markers, so some tweaking still needs to be done.

Update : I have done some fiddling with this, and I do not think that it will work with openlayers. Since the openlayers map is a composition of many divs, it seems that the html2canvas is not capable of drawing all of them properly. Specifically a WMS layer, which, when attempted to be drawn on its own, returns an error. You can try rendering one of the children divs in the map, but that has not worked for me. Although, if you are only using simple vector graphic, it could work for you.