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

Question

我在将 Google 地图帧 转换为 base64 图像时遇到问题，正如您在下方看到的，帧已保存，但地图未在内部显示它。

我想知道为什么它没有进入框架内部。

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

你需要做的是在html2canvas($('#id'), {...});里面加上useCORS: true,。

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

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

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

javascript

jquery

google-maps

html2canvas