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

【问题标题】：How to take a screenshot of GMaps Frame and turn it into an image with Javascript?如何截取 GMaps Frame 的屏幕截图并使用 Javascript 将其转换为图像？
【发布时间】：2017-08-07 21:17:21
【问题描述】：

我在将 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
});

有什么建议吗？

【问题讨论】：

你的小提琴只是抛出 Canvas2Image 不存在的错误......
@CBroe 问题还是不是因为这个，我修好了，还是一样的错误。
您的小提琴中的错误仍然相同，我没有看到任何更新。
@CBroe Canvas2Image 与我的功能无关，因为它用于将图像下载到计算机。查看下面我的答案以获取解决方案。
我没有说它与它有直接关系......我只是想让你先修复那个错误，这样我们就可以看到与它可能引发的问题相关的其他错误/警告之后（并且受污染的画布通常至少会在控制台中留下警告。）

标签： javascript jquery google-maps html2canvas

【解决方案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

【讨论】：