Tutorials  Articles  Notifications  Login  Signup


VS

Vishal Saxena

SDE 1 at Amazon Aug. 20, 2020, 11:23 a.m. ⋅ 3179 views

How to take screenshot of a div using JavaScript ?


Using html2canvas library you can take screenshot of any html element from page. You can learn more about it from their official website.

In this article, I'll show how we can use it to capture screenshot of any div.

Step 1 - Create a html page with a div and some styling in it.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
    #SampleDiv{
        background-color:Grey;
        color:white;
        padding:20px;
    }
</style>
</head>
<body>

<div id ="SampleDiv">
    <h1>HackersFriend.com</h1>
<h1>This is a Sample div.</h1>
<p> We will capture screenshot of it.</p>

</div>
</body>
</html>

Step 2 - Include html2canvas library either using CDN / local downloaded file.

For the sake of simplicity in this article, i will use CDN.

<!DOCTYPE html>
<html>
<head>
     <!-- Include html2canvas from the CDN -->
  <script src= 
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"> 
  </script> 
<title>Page Title</title>

<style>
    #SampleDiv{
        background-color:Grey;
        color:white;
        padding:20px;
    }
</style>
</head>
<body>

<div id ="SampleDiv">
    <h1>HackersFriend.com</h1>
<h1>This is a Sample div.</h1>
<p> We will capture screenshot of it.</p>

</div>
</body>
</html>

Step 3 - Create a button to capture screenshot and a div to store the screenshot

<!DOCTYPE html>
<html>
<head>
     <!-- Include html2canvas from the CDN -->
  <script src= 
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"> 
  </script> 
<title>Page Title</title>

<style>
    #SampleDiv{
        background-color:Grey;
        color:white;
        padding:20px;
    }
</style>
</head>
<body>

<div id ="SampleDiv">
    <h1>HackersFriend.com</h1>
<h1>This is a Sample div.</h1>
<p> We will capture screenshot of it.</p>

</div>
<!-- Button to take screenshot -->
        <button onclick="takeScreenShot()"> 
            Take Screenshot 
        </button> 
    </div> 
    <h1>Screenshot:</h1> 
    <div id="storedScreenshot"></div> 
</body>
</html>

Step 4 - Handle Take screenshot button click

<!DOCTYPE html>
<html>
<head>
     <!-- Include html2canvas from the CDN -->
  <script src= 
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"> 
  </script> 
<title>Page Title</title>

<style>
    #SampleDiv{
        background-color:Grey;
        color:white;
        padding:20px;
    }
</style>
</head>
<body>

<div id ="SampleDiv">
    <h1>HackersFriend.com</h1>
<h1>This is a Sample div.</h1>
<p> We will capture screenshot of it.</p>

</div>
<br>
<!-- Button to take screenshot -->
        <button onclick="takeScreenShot()"> 
            Take Screenshot 
        </button> 
    </div> 
    <h1>Screenshot:</h1> 
    <div id="storedScreenshot"></div> 
    <!-- handle take screenshot button click -->
    <script type="text/javascript"> 
  
        // Define the function  
        // to screenshot the div 
        function takeScreenShot() { 
            let CaptureDiv = 
                document.getElementById('SampleDiv'); 
                html2canvas(CaptureDiv).then( 
                function (canvas) { 
                    document 
                    .getElementById('storedScreenshot') 
                    .appendChild(canvas); 
                }) 
        } 
    </script>
</body>
</html>

Now you can click on Take screenshot button and it will take screenshot of SampleDiv and put it as an htmlcanvas in storedScreenshot div. You can right click on it and save it as an image.

Take screenshot using Javascript

 



HackerFriend Logo

Join the community of 1 Lakh+ Developers

Create a free account and get access to tutorials, jobs, hackathons, developer events and neatly written articles.


Create a free account