Take Screenshot Of HTML Element Using JavaScript

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Hello everyone 👋

A few months back, I was working on a web-based project where a feature was required that is to take a screenshot of an HTML div in the browser and show it to the user. I was like, sorry this is not possible. Then I did some research and got to know about this library called html2canvas.

So in this article, I will show how can we capture a screenshot of a web page or any element of it using html2canvas.

Implementation

Code

Include the html2canvas.min.js file in your HTML file.

...
<script src="./html2canvas.min.js" defer></script>
...

Now we will use the html2canvas method to capture the screenshot of our web page or the HTML element.

html2canvas(document.getElementById("main"), {
  allowTaint: true,
  useCORS: true,
})
.then(function (canvas) {
  // It will return a canvas element
  let image = canvas.toDataURL("image/png", 0.5);
})
.catch((e) => {
  // Handle errors
  console.log(e);
});

The html2canvas method takes two arguments

  • first is the HTML element whose screenshot you want.
  • second is a configuration object.

In the configuration object, we are using

  • allowTaint to allow cross-origin images to taint the canvas.
  • useCORS to attempt to load images from a server using CORS.

You can find the available configuration options here.

Then we are converting the returned canvas into a base64 image URL using the toDataUrl method which expects two arguments

  • type : image format.
  • encodingOptions : number between 0 and 1 indicating the image quality.

And that's it, we captured the screenshot of our HTML element.

Important

This library has some issues, some of them are mentioned in the docs. I recommend going through it and understand it before using it in any production-based environment.

If you are aware of other ways to achieve a similar kind of result, please feel free to share.

Example

Check out the GitHub Repo.

Try it out here: Live.


Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn

Interested in reading more such articles from Bibek Kakati?

Support the author by donating an amount of your choice.

Recent sponsors
Favourite Jome's photo

Wow, The library is an amazing library, thanks for sharing!

Bibek Kakati's photo

I'm glad you liked it.

Catalin Pit's photo

Nice one!

Rosius Ndimofor's photo

clean..beautiful library. Thanks for sharing

Bibek Kakati's photo

Thanks for your comment.

Eleftheria Batsou's photo

That was quick! I'll definitely try it, thanks :)

Andrew Baisden's photo

Cool did not know about this.

arogya bichpuria's photo

Insightful😍, Thank you for teaching me something new and interesting

Bibek Kakati's photo

It's my pleasure. :)