Using html2canvas

Pictures often provide more meaning than can be provided by text. You know the pain if you have ever had to explain what is happening in an application but struggled to find the right words. Sometimes it’s just easier to send a screenshot.

This is where html2canvas comes in. This handy little piece of JavaScript allows you to take “screenshots” of webpages from directly within your browser. The created image is based on the DOM, so there may be times when it’s not exactly what you see. This is because html2canvas is building its “screenshot” based on the information on the page.

Here’s how to get started. We’ll start by installing the npm package “html2canvas”.

npm install html2canvas

Now that we have the html2canvas module, we can wire it up. In this example, I am extending the simple chat application we built in a recent blog post series.

We will first extend the header to include a screenshot button.

Clicking the button will call our newScreenshot handler, which calls html2canvas to generate a screenshot from our HTML.

Using html2canvas is an easy solution for creating images from what is displayed on a web page. Something like this could have many benefits, especially when providing support for your application.

Sound off in the comments below if you’ve tried it. I’d love to hear your thoughts.