Making a website screenshot with chrome-php
For a small project I am building, I need to programatically create website screenshots. Should be easy, right? Just use chrome-php, create a headless browser instance, load the webpage and take a screenshot.
Well, no.
Taking the actual screenshot is easy, but it has some quirks:
- the script needs to remove any cookie consent dialogs, popups, panels
- it needs to deal with lazy loading, ie. programatically scroll through the whole webpage to display any lazy-loaded content (for example images)
- it needs to wait until all the dynamically loaded content is done loading (wait for network idle)
- it needs to deal with off-screen content (probably just crop it off)
- probably a few more things I haven't come across yet
For now, I am using chrome-php and it works for 95 % of situations, but on some websites (for example, smashingmagazine.com), there is a couple of content blocks missing in the screenshot. I honestly don't know why.
Versus loading the webpage in browser:
The content is not dynamically loaded (when I open the website in browser and disable Javascript, it still displays normally).
This is a mystery to me.
Tags: hobbies