Skip to content

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
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:

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.

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.

Step 4. Put it all together

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

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.

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

 

References:

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


2 Comments

  1. Elisha Elisha

    Wonderful! Would love to try this

Leave a Reply

Your email address will not be published. Required fields are marked *