Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Take Screenshot Of A Webpage Using HTML5 And JavaScript

Friday, Jan 5, 2018

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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me

Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.