Html2canvas - capture google map to image in phonegap application

Question

I want to capture google map with overlays to an image for future uses. I just tried with html2canvas, like

 html2canvas($('#map'), {
                        useCORS: true,
                        onrendered: function(canvas) {
                           document.body.appendChild( canvas );
                        }
 });

This works fine on desktop browsers like chrome & FF. However in phonegap app it just creates the image with map zoom buttons etc. But map tiles are missing. Just map controlls are there.

score 4 · Accepted Answer · answered Mar 20 '14 at 11:15

4

Got it.. :)

add allowTaint:true

html2canvas($('#map'), {
                        useCORS: true,
                        allowTaint:true,
                        onrendered: function(canvas) {
                           document.body.appendChild( canvas );
                        }
 });

answered Mar 20 '14 at 11:15

Robin C Samuel

1,215
15
33

Prefer [html2canvas-proxies](https://github.com/niklasvh/html2canvas/wiki/Proxies) – Protomen Apr 13 '14 at 23:38
That worked. However, when I move within the map (i.e, I drag it to a different position), the canvas appears incomplete: http://screencast.com/t/Py4kyTUkUZI Did you experience that too? – jeudyx Jul 25 '15 at 08:40
@jeudyx ya i think i got similar issues. Try google map resize function, after move. Not sure. – Robin C Samuel Jul 29 '15 at 12:31
At the end I followed this answer: http://stackoverflow.com/questions/24046778/html2canvas-does-not-work-with-google-maps-pan and fixed my problem. – jeudyx Jul 30 '15 at 13:23
Cool! Thanks for the comment :) – Robin C Samuel Jul 31 '15 at 14:47

score 0 · Answer 2 · edited Jan 25 '16 at 17:00

This is the function I've used:

function convertasbinaryimage() {
    html2canvas(document.getElementById("map"), {
        useCORS: true,

        onrendered: function (canvas) {

            var img = canvas.toDataURL("image/png");

            img = img.replace('data:image/png;base64,', '');

            var finalImageSrc = 'data:image/png;base64,' + img;

            $('#googlemapbinary').attr('src', finalImageSrc);

        }
    });
}

Html2canvas - capture google map to image in phonegap application

2 Answers2