DEV Community

loading...

Discussion on: 📷 How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer)

Collapse
frases profile image
frases • Edited

Hey Ben,
Thanks very much for this tutorial, it was very helpful to me.

One of the issues I see is that occasionally, there are variable results in the colors rendered in the captured image. Specifically, in maybe 1 out of 20 captures, you'll get bands of different colors when the image is rendered to a png (see attached, where dark blue band appears). The problem is that after I grab an image off of the web, I then use OpenCV to identify objects in the image. So when the colors rendered change, OpenCV flips out and doesn't read the image correctly. Have you seen this behavior before?

For some reason, the UI refreshed w/my edit, but didn't show me my attachment, so here is the link to it:
dev-to-uploads.s3.amazonaws.com/i/...

frases

Collapse
frases profile image
frases • Edited

As a follow-up to my post, I did two things which ended up improving my situation and giving me more consistent results:
1) I also tried using an older technology, the Chrome headless browser. Info on that here:
blog.frankmtaylor.com/2017/06/16/s...
developers.google.com/web/updates/...
gist.github.com/paceaux/353fc20eb6...

2) Instead of using a full page screenshot, I grabbed the image element from the DOM. Info on how to do that here:
intoli.com/blog/saving-images/

EDIT: Actually, only the Chrome headless ended up eliminating the number of incorrect image renderings to only one or two a day (my program runs once every minute).

frases