Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Take Screenshot Of A Webpage Using HTML5 And JavaScript

Saturday, Apr 8, 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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></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
<div id="wrapper">
<div id="screenshot_div">
  <button type="button" onclick="take_screenshot()">Take Screenshot</button>

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

 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));

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

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

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH