html2canvas & the Secret Setting You Need To Know

I recently created a feedback form for a client. The feedback form was on a side drawer that could be accessed on any page. The client wanted the user to have the capability to take and send a screenshot to help with feedback and for debugging purposes. ( So smart! ) I used html2canvas for this purpose, which was my first encounter with this product. I found it quite easy to use and set up was quick. The tricky part was figuring out how to hide the drawer from the screen shot and only snap the screen behind drawer. I found the documentation for this concern on the html2canvas site a little lacking. It took a bit of digging and inspecting their site and demos to figure out the special setting to hide what you want. Let’s walk through it.

To set up, install the npm package “html2canvas”.

npm install html2canvas

Add a button to your page that calls:

html2canvas(element, options);

to render the screenshot element. 

Using this set up with ‘document.body’ as the element, will render a screenshot of whatever is on the entire screen at that time. 

To ignore a part of the screen during the screen shot, like the feedback drawer, add a 

<div></div>

around the section you want to ignore. Then add “data-html2canvas-ignore=“true” within your opening div.

<div data-html2canvas-ignore=”true”></div>

This special addition will remove whatever is within that <div> from your screenshot. Overall, I enjoyed using html2canvas and would use it again in future projects.