Packages to make an HTML screenshot?
Hi, I’m searching JavaScript packages to take a screenshot of a page, or even a specific element via selector. I guess is possible to achieve it using canvas, but hey, I’m building just an MVP.
Something to suggest?
Take a look at html2canvas - it draws the page or a specific element on a canvas, which you can then convert to a base64 image.
@archie Ohh, that's promising, it also accept a selector, thank you 🙏
Another option is either Playright or Puppeteer. Both allow you to take screenshots (and a whole lot more).
@nblackburn interesting, btw they seems to heavy my MVP. I’m implementing the functionality using html2canvas
@effemegna Yeah it requires more work but is more scalable and reliable in the long term.
One thing to note about the solution above is running it in the browser won't be 1:1. It has to emulate the how a browser renders things in a entirely different rendering engine which is an expensive thing for a browser to do.
It's considered a good practice to offload computationally heavy tasks to something better suited to the task.
Ah very interested in this topic. I tried some of these packages to take a screenshot of a react component that has an image hosted on firebase but the image never shows up. I think because of cors issues. Anyone know how to resolve this?
@strange_quirks Hi Philip, I'm trying html2canvas with poor results for now 😕, anyway Have you tried to use useCors: true during the init phase of the library?
I'll experiment more, will let you know 😉
@strange_quirks Hey, I found something with more reliable result than html2canvas Try this and let me know https://github.com/tsayen/dom-to-image
For me, results are promising
Please sign in to leave a comment.