// an example html page
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="./javascripts/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#screenshot').on('click', function(e){
e.preventDefault();
html2canvas($('body'), {
onrendered: function(canvas){
var imgString = canvas.toDataURL();
window.open(imgString);
$.ajax({
url: '',
type: 'POST',
data: {
file: imgString
},
success: function(response){
//alert('Everything works fine.');
},
error: function(response){
//alert('Server response error.');
}
});
}
});
});
});
</script>
</head>
<body>
<div style="width: 800px; margin: auto;">
<input type="button" id="screenshot" value="Screenshot!"/>
<div style="height: 100px;border: 1px solid #D8D8D8;">
Big header!
</div>
<div style="height: 500px;border: 1px solid #D8D8D8;">
Medium Content
</div>
</div>
</body>
</html>
// Your php side script
<?php
if($_POST['file'] != "") {
header('Content-Type: application/json');
$file = base64_decode(str_replace('data:image/png;base64,','',$_POST['file']));
$im = imageCreateFromString($file);
if($im){
$save = imagepng($im, '/path/to/the/new/file.png');
echo json_encode(array('file' => true));
}
else {
echo json_encode(array('error' => 'Could not parse image string.'));
}
exit();
}
?>
Read More
It's not working!
hi Aicha ,
Please use in right way it is working dear OR Can you tell what it is not working there.
You can take help from here also.
http://stackoverflow.com/questions/17190224/take-a-screenshot-of-the-current-screen-and-save-it-as-a-png-image-through-php