How to Screenshot a Webpage With HTML2Canvas and Javascript

HTML2Canvas FULL PDF DOWNLOAD

HTML2Canvas is a JavaScript library created by Niklas von Hertzen. It allows users to take “screenshots” of webpages directly from their browsers.

Is it free?

YES! HTML2Canvas is licensed under the MIT license thus it is available free of charge to anyone who needs it. Also, there are no restrictions whatsoever to to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the code.

How does it work?

HTML2Canvas works by reading through the DOM of the entire page. It gathers information on all the elements of that page then builds a representation of the page. In other words, it does not actually take a screenshot of the page creates a representation of that page based on the information it gathered from the DOM.

HTML2Canvas Block Diagram – Download the vector files here.

Limitations

Because, HTML2Canvas “merely” creates a representation, it cannot fully render all CSS properties. For a full list of supported CSS properties, check out the supported features page.

Why would you need it?

There are a number of reasons why you may need a screenshot in your website. For one, you may want to integrate it as part of your webapp’s customer care system, or you may just want to have a screenshot functionality because it fun to have. Either way, HTML2Canvas is the perfect tool for the job.

Basic HTML2Canvas Usage

Step 1. Download the HTML2Canvas Javascript Library

You may download the latest version of the HTML2Canvass library here:

Zip [full javascript] [minified];
GitHub [full javascript] [minified]

The example will also be provided for download below.

Step 2. Select/Create your HTML webpage and attach the HTML2Canvas Javascript Library

This is the test webpage.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML2Canvas Test Page</title>
        <link rel='stylesheet' href='css/style.css'/>
    </head>
    <body>

        <!-- This is what will be captured for the screenshot. -->
        <div id="capture">
            <h2>HTML2Canvas Test Page, Hello World!</h2>
            <img src='images/htm2canvas-blockdiagram-samgalope-com.jpg'/>
        </div>
        <br/><br/>


        <!-- This is where the screenshot will be displayed. -->
        <div id="sam"></div>


        <!-- This is where the html2canvas javascript is referenced. -->
        <script src='js/html2canvas.min.js'></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML2Canvas Test Page</title>

</head>

<body>

<h2>HTML2Canvas Test Page, Hello World!</h2>

</div>

</body>

</html>

Step 3. Execute the HTML2Canvas Javascript Library

The example above merely includes the javascript library. Another JavaScript code is needed to “tell” the HTML2Canvas what to do. Add the code below to the bottom of the page just before the closing </body> tag.

<!-- EXECUTE EXECUTE EXECUTE -->
    <script>
        /* 
            * This tells the webpage to 1. Use the html2canvas library; 
            * 2. Tell the library to get the contents of the source div. <div id="capture"></div>
            * 3. Then make an image and put it in the target div. <div id="sam"></div>
            */
        //Define the what to copy (source) and
        var source = document.querySelector("body");
        //where to store the image (target)                
        var target = document.querySelector("#sam");

        //Execute html2canvas library
        html2canvas(source).then(canvas => {
            target.appendChild(canvas);
            console.log(canvas);
        });
    </script>
<!-- ./EXECUTE EXECUTE EXECUTE -->

* This tells the webpage to 1. Use the html2canvas library;

* 2. Tell the library to get the contents of the source div. <div id="capture"></div>

* 3. Then make an image and put it in the target div. <div id="sam"></div>

//Define the what to copy (source) and

var source = document.querySelector("body");

//where to store the image (target)

var target = document.querySelector("#sam");

//Execute html2canvas library

html2canvas(source).then(canvas => {

target.appendChild(canvas);

console.log(canvas);

});

</script>

Step 4. Put it all together

The the code below shows how the entire page will look like complete.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML2Canvas Test Page</title>
        <link rel='stylesheet' href='css/style.css'/>
    </head>
    <body>
        <div id="capture">
            <h2>HTML2Canvas Test Page, Hello World!</h2>
            <img src='images/htm2canvas-blockdiagram-samgalope-com.jpg'/>
        </div>
        <br/><br/>
        <div id="sam"></div>
        <script src='js/html2canvas.min.js'></script>
        
        <script>
            /* 
                * This tells the webpage to 1. Use the html2canvas library; 
                * 2. Tell the library to get the contents of the source div. <div id="capture"></div>
                * 3. Then make an image and put it in the target div. <div id="sam"></div>
                */
            //Define the what to copy (source) and
            var source = document.querySelector("body");
            //where to store the image (target)                
            var target = document.querySelector("#sam");

            //Execute html2canvas library
            html2canvas(source).then(canvas => {
                target.appendChild(canvas);
                console.log(canvas);
            });
        </script>

    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML2Canvas Test Page</title>

</head>

<body>

<h2>HTML2Canvas Test Page, Hello World!</h2>

</div>

* This tells the webpage to 1. Use the html2canvas library;

* 2. Tell the library to get the contents of the source div. <div id="capture"></div>

* 3. Then make an image and put it in the target div. <div id="sam"></div>

//Define the what to copy (source) and

var source = document.querySelector("body");

//where to store the image (target)

var target = document.querySelector("#sam");

//Execute html2canvas library

html2canvas(source).then(canvas => {

target.appendChild(canvas);

console.log(canvas);

});

</script>

</body>

</html>

Step 5. Download the entire project files and play with it (Zip file).

Intermediate HTML2Canvas Usage (Click to Download)

HTML2Canvas Click Button to Download the Screenshot. This implementation of HTML2Canvas utilizes event triggers. In this case, the “click” mouse trigger. Once the user clicks on the screen shot button, the screenshot image is automatically downloaded to the user’s computer.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML2Canvas Test Page2</title>
        <link rel='stylesheet' href='css/style.css'/>
    </head>
    <body>
        <div id="capture">
            <h2>HTML2Canvas Test Page, Hello World! Click the button to download!</h2>
            <img src='images/htm2canvas-blockdiagram-samgalope-com.jpg'/>
        </div>
        <button id="take-a-screenshot">Take a screenshot</button>

        <br/><br/>
        <div id="sam"></div>
        <script src='js/html2canvas.min.js'></script>
        
        <script>
            /* 
                * This tells the webpage to 1. Use the html2canvas library; 
                * 2. Tell the library to get the contents of the source div. <div id="capture"></div>
                * 3. Then make an image and put it in the target div. <div id="sam"></div>
                */
            //Define the what to copy (source) and
            var source = document.querySelector("#capture");
            //where to store the image (target)                
            var target = document.querySelector("#sam");


            //Now let's click a button to execute html2canvas
            var button = document.querySelector("#take-a-screenshot");
            button.onclick = function(){
                //Execute html2canvas library
                html2canvas(source).then(canvas => {
                    //target.appendChild(canvas);
                    saveAs(canvas.toDataURL(), 'canvas.png');
                });

            };

            //Save as function. This allows the automatic downloading of the screenshot.
            function saveAs(uri, filename) {
                var link = document.createElement('a');
                if (typeof link.download === 'string') {
                link.href = uri;
                link.download = filename;

                //Firefox requires the link to be in the body
                document.body.appendChild(link);

                //simulate click
                link.click();

                //remove the link when done
                document.body.removeChild(link);
                } else {
                window.open(uri);
                }

            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML2Canvas Test Page2</title>

</head>

<body>

<h2>HTML2Canvas Test Page, Hello World! Click the button to download!</h2>

</div>

<button id="take-a-screenshot">Take a screenshot</button>

* This tells the webpage to 1. Use the html2canvas library;

* 2. Tell the library to get the contents of the source div. <div id="capture"></div>

* 3. Then make an image and put it in the target div. <div id="sam"></div>

//Define the what to copy (source) and

var source = document.querySelector("#capture");

//where to store the image (target)

var target = document.querySelector("#sam");

//Now let's click a button to execute html2canvas

var button = document.querySelector("#take-a-screenshot");

button.onclick = function(){

//Execute html2canvas library

html2canvas(source).then(canvas => {

//target.appendChild(canvas);

saveAs(canvas.toDataURL(), 'canvas.png');

});

};

//Save as function. This allows the automatic downloading of the screenshot.

function saveAs(uri, filename) {

var link = document.createElement('a');

if (typeof link.download === 'string') {

link.href = uri;

link.download = filename;

//Firefox requires the link to be in the body

document.body.appendChild(link);

//simulate click

link.click();

//remove the link when done

document.body.removeChild(link);

} else {

window.open(uri);

}

</script>

</body>

</html>

Download the entire project files (2) and play with it (Zip file).

References:

HTML2Canvas: https://html2canvas.hertzen.com/
Document Object Model: https://www.w3schools.com/js/js_htmldom.asp
OnClick event: https://www.w3schools.com/jsref/event_onclick.asp
For canvas to direct download: https://stackoverflow.com/questions/41165865/download-html2canvas-image-to-desktop
Cover art by Kaique Rocha: https://www.pexels.com/@kaiquestr

I am Sam Galope