Html2Canvas ...谷歌地图没有渲染 [英] Html2Canvas …Google Map is not rendering
问题描述
我正在运行Apache服务器。我使用Html2canvas设置了一个简单的屏幕捕获。捕获功能渲染了一个空白的图像。我已尝试过多种方法来使用此站点的相关文章来配置javascript,而不是Avail。代码全部工作和测试,因为我可以在谷歌地图api被加载之前捕获图像。谢谢你,任何建议将不胜感激。
这是我想要使用的代码。 br $> b $ b
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 .
This IS The Code I want to use .
<!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="js1/html2canvas.js"></script>
<script type="text/javascript" src="js1/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) {
}
////// This is where i Need to declare the body as a "canvas" as described in the below "working" Example
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>
这是一个工作示例,只有画布呈现Google地图
This Is A working example only the canvas is rendering "Google Maps"
<!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="js1/html2canvas.js"></script>
<script type="text/javascript" src="js1/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>
这是php文件中的unworking examples
This Is the php file to the "unworking Example "
<?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>
推荐答案
(' #target')。html2canvas({
onrendered: function (canvas){
// 将隐藏字段的值设置为图像数据(base-64字符串)
('#target').html2canvas({ onrendered: function (canvas) { //Set hidden field's value to image data (base-64 string)
(' #img_val')。val(canvas.toDataURL( image / png));
// 手动提交表单
document .getElementById( myForm)。submit();
}
});
}
< / script >
< span class =code-keyword>< style type = text / css >
# map_canvas { position : fixed; top : 60px;
left : 0px; right :小号pan> 0px; bottom : 0px; }
# target {
border : 1px solid #CCC;
margin : 0px; 填充 : 0px; 位置 : 绝对; left : 10px; top : 80px;height: 580px; width: 580px;
\t}
\t
\t
</style>
\t
</head>
<body onload='init()' id='body'>
<f orm method=\"POST\" enctype=\"multipart/form-data\" action=\"save.php\" id=\"myForm\">
\t<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\">
\t\t\t\t <div id=\"map_canvas\"> </div& gt;
\t\t</div>
\t\t\t\t
</body>
</html>
('#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 A working example only the canvas is rendering \"Google Maps\"
This Is A working example only the canvas is rendering "Google Maps"
<!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="js1/html2canvas.js"></script>
<script type="text/javascript" src="js1/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(){
(window).load(function(){
这篇关于Html2Canvas ...谷歌地图没有渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!