✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Take Screenshot Of A Webpage Using HTML5 And JavaScript

Last Updated : Apr 15, 2022

IN - 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 Using HTML5 And JavaScript

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.

Latest Tutorials