使用 html2canvas 的 Google 地图屏幕截图无法正常工作答案

【问题标题】：Google Map screen capture is not working properly using html2canvas使用 html2canvas 的 Google 地图屏幕截图无法正常工作
【发布时间】：2014-01-24 07:56:44
【问题描述】：

Google 地图屏幕截图无法正常工作。输出图像文件中出现灰屏。对于 div 部分中的简单文本，效果很好。对此有任何建议。

我试过这样：

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script> 
</script>


<script type="text/javascript">

function initialize()
    {
    var mapProp = {
          center:new google.maps.LatLng(51.508742,-0.120850),
          zoom:5,
          mapTypeId:google.maps.MapTypeId.ROADMAP
      };
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);

$(window).load(function(){

    $('#load').click(function(){

            html2canvas($('#googleMap'), {
                onrendered: function (canvas) {
                    var dataURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    window.location.href = dataURL;
                }
            });

    });
});
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<input type="button" value="Save" id="load"/>
</body>
</html>

更新：

我将代码部分替换如下。工作正常，但保存为 .part 文件。保存到本地磁盘时是否可以为其命名？

$(window).load(function(){

    $('#load').click(function(){

            html2canvas($('#googleMap'), {
            useCORS: true,
                onrendered: function (canvas) {
                var dataUrl= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

                window.location.href = dataUrl;
                                    }
            });

    });
});

【问题讨论】：

标签： javascript jquery google-maps screenshot html2canvas

【解决方案1】：

您可以使用名为 FileSaver 的 js 库。它的用法是：

 saveAs(myImage, "image.png");

我目前正在尝试使用 html2canvas 保存谷歌地图，但我的背景是灰色的。

另外，html2canvas 的新用法是：

html2canvas(cloneThisCanvas).then(function(canvas) {
    //your canvas callback
});

【讨论】：