How To Take Screenshot Using jQuery And PHP

Introduction

Hello all, today in this article we will learn how to take screenshots using jquery and php. So, basically we will create a webpage and in the webpage we create a button which will take screenshot using the help of library called html2canvas . So once we take the screenshot we will save the screenshot in a json file using the help of jquery, javascript and php. We will be using for jquery and javascript to handle client side requests and php to handle server side request. We will also learn about file handling using php.

So, hope you guys have an idea of what we will be building. Let’s start!!

Requirements

XAMPP or WAMP or LAMP server installed and running successfully
Code editor (I have used sublime for this tutorial)
Basic knowledge of javascript, jquery and php
Browser (I have used Firefox )

Let’s get started,

Project source code can be found at the end of this article.

Step 1 – Create working folder

Project directory will be different for XAMPP, WAMP and LAMP users

For XAMPP and WAMP user

Create a folder inside htdocs and name it screenshot (or whatever you guys like )

For LAMP user

Create a folder inside /var/www/html/ and name it screenshot.

Once done our directory should be accessible by localhost url from browser.

Step 2 – Creating index.php file

Here we will create a simple html webpage which will include source of html2canvas library and jquery. We will also write few javascript and jquery based function to take screenshot on button clicked and pass the screenshot to a javascript function and from javascript function perform a ajax POST request to send screenshot an another php file.

Index.php

<!DOCTYPE html>
<html>
<head>
<title>Screenshot using html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<h1 style="text-align: center;">Tutorial: How to take screenshot</h1>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello C-Sharpcorner User!!</h4>
</div>
<div style="margin-top: 50px; text-align: center;"> <button id="take_screenshoot">Take Screenshot</button> </div>
<script type="text/javascript">
var dataURL = {};
$('#take_screenshoot').click(function() {
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas);
//console.log(canvas.toDataURL());
dataURL = canvas.toDataURL();
post_data(dataURL);
});
});
function post_data(imageURL) {
//console.log(imageURL);
$.ajax({
url: "save_data.php",
type: "POST",
data: {
image: imageURL
},
dataType: "html",
success: function() {
alert(‘Success!!’);
location.reload();
}
});
}
</script>
</body>
</html>

Understanding the the javascript and jquery function. We have created a jquery click event to capture the screenshot whenever the button is clicked. So, when the button is clicked html2canvas get the targeted element data( here we have targeted the div element using id i.e., #capture) and converts it into an html canvas and we are passing that canvas dataURL to another javascript function named post_data(dataURL) and this function passes the canvas dataURL to the javascript function where we are making a POST request using ajax to an php file (save_data.php) which will do file handling to store and append the screenshot further.

Step 3 – Creating save_data.php file

In this php file we will write script to receive a post request and once we receive a post request we will do file handling to store screenshot data to a json file name data.json.

save_data.php

<?php
if (isset($_POST['image'])) {
if (file_exists('data.json')) {
//if file exists open the file and append the data
$json_file = fopen("data.json", "a") or die("Unable to open file!");
$current_data = file_get_contents('data.json');
$array_data = json_decode($current_data, true);
$extra = array(
'imageURL' => $_POST['image']
);
$array_data[] = $extra;
$final_data = json_encode($array_data);
file_put_contents('data.json', $final_data);
fclose($json_file);
} else {
//create a json file and save the data in it
$json_file = fopen("data.json", "a") or die("Unable to open file!");
$current_data = file_get_contents('data.json');
$array_data = json_decode($current_data, true);
$extra = array(
'imageURL' => $_POST['image']
);
$array_data[] = $extra;
$final_data = json_encode($array_data);
file_put_contents('data.json', $final_data);
fclose($json_file);
}
}
?>

So, in the above php script what we are doing is we are checking post request. So if there is a post request then check if data.json file already exists if not create a file named data.json and after that store the post data in the file and close the file after the operation .

Step 4 – Creating a screenshot.html

Now we will create a screenshot.html file to retrieve the screenshot which are being saved in data.json file. To do this we will write a simple jquery function to read the json file and retrieve the screenshot.

screenshot.html

<!DOCTYPE html>
<html>
<head>
<title>Load Screenshot</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<h1>Load Screenshot from json file</h1>
</div>
<div class="screenshot"></div>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("data.json", function(json) {
//console.log(json);
for (var i = 0; i < json.length; i++) {
$('.screenshot').append('<img src="' + json[i].imageURL + '"/>');
}
});
});
</script>
</body>
</html>

Above we wrote a simple jquery function to read the json file and appended the all the screenshots in div element which we targeted using the class name (.screenshot) inside a for loop.

Now run the application and enjoy.

Project Source Code

Screenshot of Web Application

10 Comments

Join the conversation! Your thoughts help the community grow.

Vijay Anand5y ago
Hi, how to take full computer system screenshot in php or javascript. please give me the answer, is it possible sir?, if yes, please help me.
sk karthi7y ago
I have to take a screenshot were render the dynamic content, it contains supporting assets like images css and js. The above mention script capturing only text, images are not capturing, Please let me know if there any option?
Divitech Solutions7y ago
Hi Amit Kumar Singh, can you please make a function where we can take only the particular div screenshot on button click and download it at same time ?
Kishan Kumar8y ago
Very Good Bro.......Thanks.....
Vander EL-fb8y ago
Hello, can you create a function where you can download it automatically or click to download?
- Amit Kumar Singh8y ago
  DM me [email protected]
Tejaswi Rp8y ago
Hi, If there is an iFrame inside the div where we take a screenshot, the elements inside the iframe are not getting captured.... Its just giving an empty Box... Any idea how to solve it?!!
Lokesh Sharma8y ago
Ohh, Thank you, this is what i want. great job.
Sagar Pandurang Kap8y ago
Interesting stuff yaar....
- Amit Kumar Singh8y ago
  Thanks for your interest Sagar Pandurang Kap