Check Out The Latest Themes And Exclusive Deals And Offers On Themes
In Our Deals For Web Developers Section


Join Today And Get All The 87 Themes In Just $69! Join Today

Take Screenshot Of A Webpage Using HTML5 And JavaScript

Sunday, Mar 5, 2017

Tags:- HTML5 JavaScript


In this tutorial we will show you how to take screenshot of a webpage using HTML5 and JavaScript.This is very important feature sometimes you want to read something but you dont have time to read then this feature comes and helps to take screenshot of a webpage and save it for you as an image to view it later.You have to download Html2Canvas jQuery plugin to take screenshot.


Take Screenshot Of A Webpage


To Take Screenshot It Takes Only Two Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file to save and download the screenshot


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name screenshot.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script>
function take_screenshot()
{
 html2canvas(document.body, {  
  onrendered: function(canvas)  
  {
    var img = canvas.toDataURL()
    $.post("save_screenshot.php", {data: img}, function (file){
	window.location.href =  "save_screenshot.php?file="+ file
    });
  }
 });
}
</script>
<body>
<div id="wrapper">
<div id="screenshot_div">
  <button type="button" onclick="take_screenshot()">Take Screenshot</button>
</div>
</div>
</body>
</html>

In this step we first insert both the jQuery files to make this process works then we create a simple button to take screenshot whenever user clicks on 'Take Screenshot' button take_screenshot function is called which is the main function to capture screen and create an image of that using canvas and then send the data to save_screenshot.php file to save and download the image.You may also like Create A Simple PageView Counter Using PHP and MySQL



Step 2.Make a PHP file to save and download the screenshot

We make a PHP file and save it with a name save_screenshot.php

<?php
if($_GET['file'])
{
 $file=$_GET['file'];
 if (file_exists($file))
 {
  header('Content-Description: File Transfer');
  header('Content-Type: image/png');
  header('Content-Disposition: attachment; filename='.basename($file));
  header('Content-Transfer-Encoding: binary');
  header('Expires: 0');
  header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
  header('Pragma: public');
  header('Content-Length: ' . filesize($file));
  ob_clean();
  flush();
  readfile($file);
  unlink($file);
  exit;
 }
}

if($_POST['data'])
{
 $data = $_POST['data'];
 $file = md5(uniqid()) . '.png';
 $uri =  substr($data,strpos($data,",")+1);
 file_put_contents('./'.$file, base64_decode($uri));
 echo $file;
 exit();
}
?>

In this step we create two if conditions first is used to download the saved screenshot and second is used to save screenshot.Lets Start with second if condition in this we get the image data send by take_screenshot() function and then we save the image in directory.In first condition we first check if the file exist if yes then we insert all the necessary header required to download the file.You may also like Change The Design Of All Elements In A WebPage Using JavaScript And CSS


Thats all, this is how to take Screenshot of a webpage using HTML5 and JavaScript.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email