How to take a screenshot of GMaps Frame and turn it into an image with Javascript?

Question

I have an issue while turning a Google Maps frame to a base64 image, as you can see below the frame is saved but the map is not shown inside it.

I am wondering why it is not taking the inside of the frame.

JSFiddle : http://jsfiddle.net/Lindow/gvy1x7kf/6/

HTML:

<input type="button" id="btnSave" value="Save PNG"/>
<hr>
<div class="elements" id="map"></div>
<div class="elements" id="img-out"></div>

JavaScript:

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#map"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
}); 

var map = new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
});

Any suggestion?

Answer 1

What you need to do is to add useCORS: true, inside html2canvas($('#id'), {...});.

What useCORS is used for ?

Cross-origin resource sharing is a standard for accessing web resources on different domains.

JSFiddle : http://jsfiddle.net/Lindow/60yn2hss/

JavaScript:

$("#btnSave").click(function() { 
    html2canvas($("#map"), {
        useCORS: true, #<--- here
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);
            $("#img-out").append(canvas);
        }
    });
});

output:

Know more here : https://html2canvas.hertzen.com/documentation.html