本文介绍了Html2Canvas ...谷歌地图未呈现的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在运行 Apache 服务器.我使用 Html2canvas 设置了一个简单的屏幕捕获.捕获功能正在呈现一个空白图像.我已经尝试了多种方法来使用本站点中的相关文章配置 javascript 以失败.代码全部正常工作并经过测试,因为我可以在加载谷歌地图 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"/><头><title>测试员</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"<</<脚本>google.load("地球", "1");var ge = null;函数初始化(){google.earth.createInstance("map_canvas", initCallback, failureCallback);}函数initCallback(对象){ge = 对象;ge.getWindow().setVisibility(true);}函数失败回调(对象){}函数捕获(){$('#target').html2canvas({onrendered:函数(画布){//将隐藏字段的值设置为图像数据(base-64字符串)$('#img_val').val(canvas.toDataURL("image/png"));//手动提交表单document.getElementById("myForm").submit();}});}<style type="text/css">#map_canvas {位置:固定;顶部:60px;左:0px;右:0px;底部:0px;}#目标 {边框:1px 实心 #CCC;边距:0px;填充:0px;位置:绝对;左:10px;顶部:80px;高度:580px;宽度:580px;}</风格><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=""/></表单><input type="submit" value="对下面的 Div 进行截图" onclick="capture();"/><div id="目标"><div id="map_canvas">

</html>

这是渲染到 save.php 的 php 文档

<h2>保存图像并显示给用户</h2><表格><tr><td><a href="img.png" target="blank">单击此处查看保存到服务器的图像</td><td align="right"><a href="index.php">单击此处返回</td></tr><tr><td colspan="2"><br/><br/><跨度>这是客户端图像:</span><br/><?php//显示图片echo '<img src="'.$_POST['img_val'].'"/>';?></td></tr><style type="text/css">身体,一个,跨度{字体系列:Tahoma;字体大小:10pt;字体粗细:粗体;}</风格>

此示例工作正常.我想使用Google Earth"通过上述代码实现这一点

<头><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 type="text/javascript">函数初始化(){var mapProp = {中心:新 google.maps.LatLng(51.508742,-0.120850),变焦: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'), {使用CORS:真,onrendered:函数(画布){var dataUrl= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");window.location.href = dataUrl;}});});});<身体><div id="googleMap" style="width:500px;height:380px;"></div><input type="button" value="Save" id="load"/></html>
解决方案

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

我个人使用了这个代理:PHP html2canvas 代理

只需下载它,然后确保创建代理使用的数据目录存在且可写.默认情况下,该目录名为data",它应该在您的 webroot 中.

然后更改这段 JavaScript 以使用代理:

html2canvas($('#googleMap'), {代理:'html2canvasproxy.php',使用CORS:假,onrendered:函数(画布){var dataUrl= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");window.location.href = dataUrl;}});

还要确保将 useCORS 设置为 false,因为您不能同时使用代理并启用 useCORS.

I am running a Apache Server . I have a simple screen capture set up using Html2canvas .The capture function is rendering a blank Image . I have tried numerous ways to configure the javascript using related articles from this site to no Avail . The code is all working and tested because I can capture the image prior to "google maps api being loaded . Thank you and any advice would be much appreciated .

<!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>

This is the php document renders to 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>

This sample works Correctly . I want to achieve this with above Code using "Google Earth"

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

Since I was just having a similar problem and I managed to solve it maybe this will help you too.It turns out to be a problem with loading images from a different (external) domain. In our case the external domain is something like maps.googleapis.com.html2canvas allows us to use a proxy to solve that problem so instead of directly trying to load the images cross-domain we use the local proxy to retrieve the images, save them and pass them on to html2canvas.

I personally used this proxy: PHP html2canvas proxy

Just download it and then make sure to create the data directory that the proxy uses exists and is writable. By default the directory is called 'data' and it should be in your webroot.

Then change the piece of JavaScript to use the proxy:

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;
    }
 });

Also make sure to set useCORS to false, because you can't use both a proxy and have useCORS enabled.

这篇关于Html2Canvas ...谷歌地图未呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 13:37