Breaking News: Grepper is joining You.com. Read the official announcement!

take screenshot using jquery

Swati Warang answered on December 22, 2022 Popularity 6/10 Helpfulness 1/10

answer take screenshot using jquery

take screenshot using jquery

Comment

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to take screenshot of
        a div using JavaScript?
    </title>
  
    <!-- Include from the CDN -->
    <script src=
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
    </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>

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: www.geeksforgeeks.org

Tags: javascript jquery screenshot take using

Link to this answer
Share Copy Link

Contributed on Dec 22 2022

Swati Warang

0 Answers Avg Quality 2/10

take screenshot using jquery

Contents

More Related Answers

take screenshot using jquery

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.