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.
To Take Screenshot It Takes Only Two Steps:-
- Make a HTML file and define markup and scripting
- 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
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery