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.

Answer 1

Got it.. :)

add allowTaint:true

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

Answer 2

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

        }
    });
}