Take Screenshot Of HTML Element Using JavaScript

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

• Download the javascript file: html2canvas

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.

---

Originally published on blog.bibekkakati.me

---

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

---

If you like my work and want to support it, you can do it here. I will really appreciate it.

Comments

[Shashwat amin]

Is there any other robust alternative to html2canvas?

[Dashpilot]

There’s also github.com/bubkoo/html-to-image

[Chris Hayes]

html-to-image worked better for me. The screenshots from html2canvas had styling issues where it didn't match what the page was showing. html-to-image was pretty much 1-for-1, the one thing I had to do was put a background color on the element I was imaging, or else it defaults to transparent regardless of what's behind the element.

[Rajesh Kumar Yadav]

Awesome!!!

[Bibek]

Thanks!

[The EisSorcer]

I don't understand. How is this commonly used?

[Vlad Rindevich]

I would think of using it in e2e tests.

[Bibek]

That could be a good use case @ausginer .

[Bibek]

I used it to show a smaller preview of a larger div section.

[Shyam-Dadhaniya]

can we take the full webpage screenshot using html2Canvas?