DEV Community

Cover image for Take Screenshot Of HTML Element Using JavaScript
Bibek
Bibek

Posted on • Updated on • Originally published at blog.bibekkakati.me

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

Code

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



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


Enter fullscreen mode Exit fullscreen mode

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);
});


Enter fullscreen mode Exit fullscreen mode

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.



Top comments (10)

Collapse
 
shash7 profile image
Shashwat amin

Is there any other robust alternative to html2canvas?

Collapse
 
dashpilot profile image
Dashpilot
Collapse
 
chris_hayes profile 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.

Collapse
 
rajeshkumaryadavdotcom profile image
Rajesh Kumar Yadav

Awesome!!!

Collapse
 
bibekkakati profile image
Bibek

Thanks!

Collapse
 
eissorcercode99 profile image
The EisSorcer

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

Collapse
 
ausginer profile image
Vlad Rindevich

I would think of using it in e2e tests.

Collapse
 
bibekkakati profile image
Bibek

That could be a good use case @ausginer .

Collapse
 
bibekkakati profile image
Bibek

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

Collapse
 
shyamdadhaniya_89 profile image
Shyam-Dadhaniya

can we take the full webpage screenshot using html2Canvas?