Html2Canvas …Google Map is not rendering

Question

0.00/5 (No votes)

See more:

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 .

HTML

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

This Is A working example only the canvas is rendering "Google Maps"

HTML

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

This Is the php file to the "unworking Example "

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>

Posted 18-Aug-14 15:28pm

emax79

Add a Solution

Comments

Sergey Alexandrovich Kryukov 18-Aug-14 22:25pm

What "Apache"? Html2Canvas works in the browser; this is Javascript.
—SA

emax79 18-Aug-14 22:33pm

Its a Server .........Version 2.4.9 Sir..... Its for testing ... Do you understand My Problem ? I appreciate the reply . I admit It can be a Little bit Tricky . Np the html2canvas does not capture a google earth Image in the Sample posted using My Server or a Browser for that matter . Hope that helps . Hope to hear back from you . Thank you Sergy :)

Sergey Alexandrovich Kryukov 18-Aug-14 22:46pm

I only understand that the image is blank. But do you understand that it has nothing to do with the server? Consider you don't have the server.
—SA

emax79 18-Aug-14 22:55pm

I sort of Understand Sir . I mention it because I understand there is possible "proxys" that may help me complete my function that I do not currently have installed . I just am trying to submit all the information i have . I cannot test in a regular browser for I would have to upload all my files to a "public Server" Do you have any Suggestion to my dilemma ? Thank you again Sergey :)

Sergey Alexandrovich Kryukov 18-Aug-14 22:57pm

Not yet...
—SA

emax79 18-Aug-14 23:01pm

May I Post one more solution ? And possible you take a look at it . I am really grateful to have your interest . I really need to achieve this function and Im going bonkers . I have the "google earth" working in my new sample . It is capturing . The problem is the Image is blank Still. Thank you very much for your input thus far . I have the "google Earth " Loading in the Working demo I posted in the later sample .

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)