Post
Ask Question

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

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Screenshot using html2canvas</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  7.     <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>  
  8. </head>  
  9.   
  10. <body>  
  11.     <h1 style="text-align: center;">Tutorial: How to take screenshot</h1>  
  12.     <div id="capture" style="padding: 10px; background: #f5da55">  
  13.         <h4 style="color: #000; ">Hello C-Sharpcorner User!!</h4>  
  14.     </div>  
  15.     <div style="margin-top: 50px; text-align: center;"> <button id="take_screenshoot">Take Screenshot</button> </div>  
  16.     <script type="text/javascript">  
  17.         var dataURL = {};  
  18.         $('#take_screenshoot').click(function() {  
  19.             html2canvas(document.querySelector("#capture")).then(canvas => {  
  20.                 document.body.appendChild(canvas);  
  21.                 //console.log(canvas.toDataURL());  
  22.                 dataURL = canvas.toDataURL();  
  23.                 post_data(dataURL);  
  24.             });  
  25.         });  
  26.   
  27.         function post_data(imageURL) {  
  28.             //console.log(imageURL);  
  29.             $.ajax({  
  30.                 url: "save_data.php",  
  31.                 type: "POST",  
  32.                 data: {  
  33.                     image: imageURL  
  34.                 },  
  35.                 dataType: "html",  
  36.                 success: function() {  
  37.                     alert(‘Success!!’);  
  38.                     location.reload();  
  39.                 }  
  40.             });  
  41.         }  
  42.     </script>  
  43. </body>  
  44.   
  45. </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

  1. <?php  
  2.   
  3. if (isset($_POST['image'])) {  
  4.       
  5.     if (file_exists('data.json')) {  
  6.           
  7.         //if file exists open the file and append the data  
  8.           
  9.         $json_file = fopen("data.json", "a") or die("Unable to open file!");  
  10.           
  11.         $current_data = file_get_contents('data.json');  
  12.           
  13.         $array_data = json_decode($current_data, true);  
  14.           
  15.         $extra = array(  
  16.             'imageURL' => $_POST['image']  
  17.         );  
  18.           
  19.         $array_data[] = $extra;  
  20.           
  21.         $final_data = json_encode($array_data);  
  22.           
  23.         file_put_contents('data.json', $final_data);  
  24.           
  25.         fclose($json_file);  
  26.           
  27.     } else {  
  28.           
  29.         //create a json file and save the data in it  
  30.           
  31.         $json_file = fopen("data.json", "a") or die("Unable to open file!");  
  32.           
  33.         $current_data = file_get_contents('data.json');  
  34.           
  35.         $array_data = json_decode($current_data, true);  
  36.           
  37.         $extra = array(  
  38.             'imageURL' => $_POST['image']  
  39.         );  
  40.           
  41.         $array_data[] = $extra;  
  42.           
  43.         $final_data = json_encode($array_data);  
  44.           
  45.         file_put_contents('data.json', $final_data);  
  46.           
  47.         fclose($json_file);  
  48.           
  49.     }  
  50.       
  51. }  
  52.   
  53. ?>  

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

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Load Screenshot</title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.     <div class="main">  
  11.         <h1>Load Screenshot from json file</h1>  
  12.     </div>  
  13.     <div class="screenshot"></div>  
  14.     <script type="text/javascript">  
  15.         $(document).ready(function() {  
  16.             $.getJSON("data.json", function(json) {  
  17.                 //console.log(json);  
  18.                 for (var i = 0; i < json.length; i++) {  
  19.                     $('.screenshot').append('<img src="' + json[i].imageURL + '"/>');  
  20.                 }  
  21.             });  
  22.         });  
  23.     </script>  
  24. </body>  
  25.   
  26. </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.

 

 

Screenshot of Web Application

Screenshot of Web Application

Screenshot of Web Application

Screenshot of Web Application


Similar Articles