Open In App

How to take screenshot of a div using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

A screenshot of any element in JavaScript can be taken using the html2canvas library. This library can be downloaded from its official website. The below steps show the method to take a screenshot of a <div> element using JavaScript.

Below are the Steps to take a screenshot of a div using JavaScript

Step 1: Create a blank HTML document.
Step 2: Include the html2canvas library code by either using the downloaded file or using a link to a CDN version.

HTML




<!DOCTYPE html>
<html>
<head>
  <title>
    How to take screenshot of
    a div using JavaScript?
  </title>
 
  <!-- Include from the CDN -->
  <script src=
  </script>
 
  <!-- Include locally otherwise -->
  <!-- <script src='html2canvas.js'></script> -->
</head>
<body>
   
</body>
</html>


Step 3: Create a <div> that has to be captured in the screenshot and give it an id so that it can be used later.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to take screenshot of
        a div using JavaScript?
    </title>
 
    <!-- Include from the CDN -->
    <script src=
    </script>
 
    <!-- Include locally otherwise -->
    <!-- <script src='html2canvas.js'></script> -->
    <style>
        #photo {
            border: 4px solid green;
            padding: 4px;
        }
    </style>
</head>
 
<body>
    <div id="photo">
        <h1>GeeksforGeeks</h1>
        Hello everyone! This is a
        trial page for taking a
        screenshot.
        <br><br>
        This is a dummy button!
        <button> Dummy</button>
        <br><br>
        Click the button below to
        take a screenshot of the div.
        <br><br>
    </div>
    <h1>Screenshot:</h1>
    <div id="output"></div>
</body>
 
</html>


Step 4: Create a button inside <div> element and use an “onclick” handler for the button.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to take screenshot of
        a div using JavaScript?
    </title>
 
    <!-- Include from the CDN -->
    <script src=
    </script>
 
    <!-- Include locally otherwise -->
    <!-- <script src='html2canvas.js'></script> -->
 
    <style>
        #photo {
            border: 4px solid green;
            padding: 4px;
        }
    </style>
</head>
 
<body>
    <div id="photo">
        <h1>GeeksforGeeks</h1>
        Hello everyone! This is a
        trial page for taking a
        screenshot.
        <br><br>
        This is a dummy button!
        <button> Dummy</button>
        <br><br>
        Click the button below to
        take a screenshot of the div.
        <br><br>
 
        <!-- Define the button
        that will be used to
        take the screenshot -->
        <button onclick="takeshot()">
            Take Screenshot
        </button>
    </div>
    <h1>Screenshot:</h1>
    <div id="output"></div>
</body>
 
</html>


Step 5: The function to take the screenshot is defined inside the <script> tag. This function will use the html2canvas library to take the screenshot and append it to the body of the page.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to take screenshot of
        a div using JavaScript?
    </title>
 
    <!-- Include from the CDN -->
    <script src=
    </script>
 
    <!-- Include locally otherwise -->
    <!-- <script src='html2canvas.js'></script> -->
 
    <style>
        #photo {
            border: 4px solid green;
            padding: 4px;
        }
    </style>
</head>
 
<body>
    <div id="photo">
        <h1>GeeksforGeeks</h1>
        Hello everyone! This is a
        trial page for taking a
        screenshot.
        <br><br>
        This is a dummy button!
        <button> Dummy</button>
        <br><br>
        Click the button below to
        take a screenshot of the div.
        <br><br>
 
        <!-- Define the button
        that will be used to
        take the screenshot -->
        <button onclick="takeshot()">
            Take Screenshot
        </button>
    </div>
    <h1>Screenshot:</h1>
    <div id="output"></div>
 
    <script type="text/javascript">
 
        // Define the function
        // to screenshot the div
        function takeshot() {
            let div =
                document.getElementById('photo');
 
            // Use the html2canvas
            // function to take a screenshot
            // and append it
            // to the output div
            html2canvas(div).then(
                function (canvas) {
                    document
                    .getElementById('output')
                    .appendChild(canvas);
                })
        }
    </script>
</body>
 
</html>


Output:The screenshot can be saved by right-clicking on it and saving it as an image, as shown below.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 15 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads