Draw OpenLayers layers to Canvas

Question

I need to export the current OpenLayers view into a canvas to finally save it as a image.

My problem is, that I need an image of the current user view with some interactive elements.

I saw this working example: http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html

There is a little addon that is not OpenLayers standard, but add a little export functionality: http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html

but this does no work on current open layers (2.13) any more and I don't get which version that is.

The Constant OpenLayers.Layer.Grid.ONECANVASPERLAYER does not exist (any more ?) And the option "useCanvas" is deprecated as well.

This is the broken code (summarized):

        if (layer instanceof OpenLayers.Layer.Grid){
            this.drawLayer(layer.canvas);    
        }

A Grid layer has no attribute "canvas" as far as I can see it.

Answer 1

Well, you were using Camp-to-Camp's sandbox code which is not part of the OL releases. Rather it's more for trying out ideas, though it some cases OL may incorporate Camp-to-Camp's code in a future release. As I used their code at one point myself while exploring canvas options with OL, I believe it was a modified version of 2.11 (perhaps 2.12). However, the OL stable 2.13 release did not use Camp-to-Camp's canvas options for the layers.

That being said, you can declare an HTML5 canvas element, copy tile images and image layers onto it, and then use methods to retrieve information or manipulate those images via the canvas element. There's also a helper script called html2canvas http://html2canvas.hertzen.com/ which can take a screenshot of the web page or parts of web page. I've gotten this to work but the problem with OL 2.x is that one can't export the background map tiles when saving to an image (at least I couldn't find something that working when I was researching this issue). If that's not a problem for you, then perhaps give html2canvas a try. BTW, OL 3.x has solved the map background issue and has an example you can try.