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.
Related
here is my code while i download pdf images attributes of html are missing.
suppose in cases like generating invoices we should print tables containing details along with logo.
but images are not displaying in downloaded pdf using this code.Provide me with possible resolution and reason for this.thanks in advance
$(document).on('click', '#btn', function() {
let pdf = new jsPDF();
let section = $('body');
let page = function() {
pdf.save('pagename.pdf');
};
pdf.addHTML(section, page);
})
html,
body {
overflow-x: hidden;
}
#btn {
padding: 10px;
border: 0px;
margin: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
</style>
</head>
<body>
<button id="btn">Convert to PDF</button>
<div id="text">
<h2>HTML Page with Image to PDF</h2>
<img src="http://photojournal.jpl.nasa.gov/jpeg/PIA17555.jpg" width="300px">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
all the html elements are working fine except images . kindly help me with resolving this.
jsPdf does not support adding images the way you are trying to add them, because addtHtml function uses the html2canvas module, to convert your Html to canvas, so jsPdf can render it into pdf. Please check this link below.
https://weihui-guo.medium.com/save-html-page-and-online-images-as-a-pdf-attachment-with-one-click-from-client-side-21d65656e764
Following is my code. It works perfectly well on local host. Somehow when I upload it on server image does not get save.
index.php:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Capture Web camera image </title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 16px; }
form > input { margin-right: 16px; }
#img_output { float:right; margin:21px; padding:21px; border:1px solid; background:#3d3d3d; }
</style>
</head>
<body>
<div id="img_output">Live captured image will Display here...</div>
<h1>jQuery Capture Web camera image </h1>
<h3>Live Demo And Example Demonstrates simple Images 600x460 capture & display here</h3>
<div id="live_camera"></div>
<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
Webcam.set({
width: 600,
height: 460,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#live_camera' );
</script>
<form>
<input type=button value="Take Snapshot" onClick="get_take_snap()">
</form>
<script language="JavaScript">
function get_take_snap() {
// Simple call the take some your selfi and some get your live image data
Webcam.snap( function(data_uri) {
// display img_output in page
Webcam.upload( data_uri, 'storeImage.php', function(code, text) {
document.getElementById('img_output').innerHTML =
'<h2>Here is your Display image:</h2>' +
'<img src="'+text+'"/>';
} );
} );
}
</script>
</body>
</html>
PHP Code
<?php
$myfilename = time() . '.jpg';
$livefilepath = 'upload/';
move_uploaded_file($_FILES['webcam']['tmp_name'], $livefilepath.$myfilename);
echo $livefilepath.$myfilename;
?>
The Hosting Provider's Server Admin Team resolved the issue. A complete permission fix from the backend was done for this, so that all the permissions are fixed including the root directory.
I have this code below that contains a simple hello world html page i'm trying to use the library html2canvas to try to download the canvas but it doesn't seem to be working i'm following a tutorial i saw but it doesn't work am i doing something wrong below? Any help would be greatly appreciated.
function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#match-button').attr('href', canvas.toDataURL('image/png'));
$('#match-button').attr('download', 'Test.png');
$('#match-button')[0].click();
});
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>
</body>
</html>
First of all. If test is an id of some element, jQuery syntax requires # before it.
$('#test')
Then, html2canvas onrendered option is deprecated. Use then() method instead as described on the official site https://html2canvas.hertzen.com/. I could not find test element in html snippet from the question, so I added it after the match-button. The modified code looks like this:
<script>
function sendData() {
html2canvas(document.getElementById('capture')).then(function (canvas) {
$('#capture').append(canvas);
$('#test').attr('href', canvas.toDataURL('image/png'));
$('#test').attr('download', 'Test.png');
$('#test')[0].click();
});
}
</script>
...
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Helloo world!</h4>
</div>
<div id="match-button" onclick="sendData();">capture</div>
<a id="test" href="#"></a>
I want to save captured image in a folder from webcam. My code captures image only but how can I store it in a folder. This is my first time to do this. If anyone mention that it will be helpful for me. Thanks in advance.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.min.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</form>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
</script>
In the following code. After save button clicked it is asking for download the output image generated from Html2canvas. How to chage this code so that instaed of asking to download it will generate the image on the fly with 'lightbox' feature.
I tried as :
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<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="html2canvas.js?rev032"></script>
<script type="text/javascript">
$(window).load(function() {
$('#load').click(function() {
html2canvas($('#testdiv'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
});
});
</script>
</head>
<body>
<div id="testdiv">
<h1>Testing</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<br/>
</div>
<input type="button" value="Save" id="load"/>
</body>
</html>
Instead of redirecting the visitor to the image like you do here:
window.location.href = img;
You can add an invisible (display: none) image to the page:
<img src="" id="image" style="display: none; position: absolute; top: 30%; left: 30%; z-index: 1000;" />
And show it with your canvas image data like so:
$('#image').attr('src', img).fadeIn(200);
Now this won't create a very interesting lightbox without some additional work, but for that I would suggest you use a plugin instead. Something like Slimbox or Fancybox.
You can try
$("#containerID").empty().append(canvas); // containerID is the container element for your rendered image
to append image on your page. And in the same way try giving canvas or img (in your case) as url to your lightbox code.