admin管理员组文章数量:1434914
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"".dtd"><html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Tester</title>
<script type="text/javascript" src="//ajax.googleapis/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=""></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=";sensor=false"></script>
<script src=".8.2/jquery.js"></script>
<script type="text/javascript" src =".9.0.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis/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>
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/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./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./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./maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src ="http://code.jquery./jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis./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>
- you can get the map image from google, but html2canvas can't see it – dandavis Commented Aug 19, 2014 at 0:06
- Yes This is Correct ... It will load successfully. I have another sample of a successfule screen capture while its in "google Maps " I am using google earth so the syntax Has to change . In which I am not able to figure out . I will post it . Thank you for your interest . – eric maxfield Commented Aug 19, 2014 at 0:25
- The Html2Canvas is not recognizing the Page is loaded . The Google Maps working example demonstrates how to Load the document and successfully captures the screenshot . I tried to change the javascript in My first example to match the "working" example. I keep getting errors in the method in which I try to "load " the document . I need to capture to occur with the "capture " button and its all giving me trouble :) . Thank you Mr DanDavis... – eric maxfield Commented Aug 19, 2014 at 0:56
- I'm just playing with something similar myself. I actually see all the markers and other elements, just not the map itself it renders a grey empty background. – Ruben Commented Aug 22, 2014 at 2:59
- take a look at this answer: stackoverflow./questions/24046778/… – Diogo Cid Commented Jan 20, 2016 at 14:50
1 Answer
Reset to default 3Since 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.. 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.
本文标签： javascriptHtml2Canvas Google Map is not renderingStack Overflow
版权声明：本文标题：javascript - Html2Canvas ...Google Map is not rendering - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745623729a2666842.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论