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.
Top comments (10)
Is there any other robust alternative to html2canvas?
Thereβs also github.com/bubkoo/html-to-image
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.
Awesome!!!
Thanks!
I don't understand. How is this commonly used?
I would think of using it in e2e tests.
That could be a good use case @ausginer .
I used it to show a smaller preview of a larger div section.
can we take the full webpage screenshot using html2Canvas?