Question

我正在运行Apache服务器。我使用Html2canvas设置了一个简单的屏幕捕获。捕获功能渲染了一个空白的图像。我已尝试过多种方法来使用此站点的相关文章来配置javascript，而不是Avail。代码全部工作和测试，因为我可以在“谷歌地图api被加载之前捕获图像。谢谢你，任何建议将不胜感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <head>

    <title>Tester</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="html2canvas.js"></script>
    <script type="text/javascript" src="jquery.plugin.html2canvas.js"></script>
    <script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
    <script>
google.load("earth", "1");

var ge = null;

function init() {
  google.earth.createInstance("map_canvas", initCallback, failureCallback);
}

function initCallback(object) {
  ge = object;
  ge.getWindow().setVisibility(true);
}

function failureCallback(object) {
}



    function capture() {
        $('#target').html2canvas({
            onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
                $('#img_val').val(canvas.toDataURL("image/png"));
                //Submit the form manually
                document.getElementById("myForm").submit();
            }
        });
    }





    </script>

    <style type="text/css">
      #map_canvas {position: fixed; top: 60px;
            left: 0px; right:0px; bottom:0px; }

    #target {
    border: 1px solid #CCC;
    margin: 0px;  padding:0px; position: absolute; left: 10px;top: 80px;height: 580px; width: 580px;
    }


</style>

  </head>

  <body onload='init()' id='body'>

<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
    <input type="hidden" name="img_val" id="img_val" value="" />
</form>

<input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" />

<div id="target">
                   <div id="map_canvas"> </div>
        </div>

  </body>
</html>

这是php文档呈现给save.php

<?php
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('img.png', $unencodedData);
?>
<h2>Save the image and show to user</h2>
<table>
    <tr>
        <td>
            <a href="img.png" target="blank">
                Click Here to See The Image Saved to Server</a>
        </td>
        <td align="right">
            <a href="index.php">
                Click Here to Go Back</a>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <br />
            <br />
            <span>
                Here is Client-sided image:
            </span>
            <br />
<?php
//Show the image
echo '<img src="'.$_POST['img_val'].'" />';
?>
        </td>
    </tr>
</table>
<style type="text/css">
body, a, span {
    font-family: Tahoma; font-size: 10pt; font-weight: bold;
}
</style>

此示例正常工作。我希望使用“Google地球”

通过上述代码实现此目的

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 
<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="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jquery.plugin.html2canvas.js"></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'), {
            useCORS: true,
                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>

Answer 1

由于我遇到了类似的问题而我设法解决了这个问题，这也许对你有帮助。事实证明，从不同（外部）域加载图像是一个问题。在我们的例子中，外部域名类似于maps.googleapis.com。 html2canvas允许我们使用代理来解决这个问题所以不是直接尝试加载跨域的图像，而是使用本地代理来检索图像，保存它们并将它们传递给html2canvas。

我个人使用此代理：PHP html2canvas proxy

只需下载它，然后确保创建代理使用的数据目录并且是可写的。默认情况下，该目录称为“数据”。它应该在你的webroot中。

然后更改JavaScript片段以使用代理：

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

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

还要确保将useCORS设置为false，因为您无法同时使用代理并启用了useCORS。

Html2Canvas ...谷歌地图没有渲染

1 个答案: