javascript - 如何使用 Javascript 截取 GMaps Frame 的屏幕截图并将其转换为图像？

Question

我在将 Google map 框架转换为 Base64 图像时遇到问题，如下所示，框架已保存，但 map 未显示在其中。

我想知道为什么它没有占据框架的内部。

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

有什么建议吗？

Answer 1

您需要做的是添加 useCORS: true,里面html2canvas($('#id'), {...}); .

什么 useCORS用于？

跨域资源共享是访问不同域上的网络资源的标准。

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

输出:

在这里了解更多:https://html2canvas.hertzen.com/documentation.html