无法使用 html2canvas 捕获 google-maps 的“信息窗口”的内容

Question

使用 html2canvas 捕获谷歌地图时遇到问题。

当我选择一个地点时，谷歌地图会显示一个信息窗口，其中包含有关该地点的信息，但是当我在打印中捕获地图时，只会出现一个白色矩形。

在这个例子中选择任何地方并将地图保存在png中时，您可以看到此问题

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

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

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

<style>
#map {
  width:300px;
  height:300px;
}

.elements {
  display:inline-block;
}
</style>

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

这个例子在三个月前有效。

任何的想法？

提前致谢

Answer 1

我发现了错误，我需要使用 html2canvas 的属性“use Overflow: false”

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