TODO: Capture screenshot of linked page

I would like to take a screenshot of a linked page and use it as a thumbnail.

This would also be useful for testing or quickly reviewing design changes.

Drupal Modules

I looked at Screenshot Widget, which uses HTML2Canvas, and Web Page Archive, using headless chrome.

These could be good starting points, but don't do exactly what I want.

Another option is Grab That Element, which can specify an element selector to screenshot using html2canvas.

Browser Automation

Testing web apps in a browser has recently taken a leap forward. In the past, we used tools like Selenium and PhantomJS to script actions in the browser. Now we have real browser automation tools like Puppetteer from Google, and Playwright from Microsoft.

* The original Puppetteer team left Google to form the Playwrite team.

Screenshot Tools

Shot Scraper (https://github.com/simonw/shot-scraper) is a python tool that can take screenshots, using Playwright. It can take a CSS selector an screenshot the element, which his exactly what I want.

Puppetteer can also take screenshots and has code samples to get started.

HTML2Canvas runs in the user's browser and can simulate element rendering and take a screenshot. What are the pros/cons of using this?

BackdropJS is a testing tool build with Playwright.

Browser Testing/Screenshot Services

There are many paid services out there than can provide the function I'm looking for with an API.

API Stacks has a screenshot service that is relatively affordable. It's $15/mo for 10,000 requests, which I think would be enough for my personal needs but wouldn't really scale as a free or cheap service.

There are browser testing services like Browser Stack that can run scripted tests and take screenshots in multiple browsers. I want to build something like this later, but for now just want simple screenshots.

Local Hosted Services

I don't really want to pay for another hosting provider or service, and I have enough computers sitting around that can handle this. How do I let my web server connect back to them?

Ngrok is a service provider with a free tier to connect to local hosts. There is also OpenVPN, and now WireGuard that lets you self host safely. I will investigate these more in the future.

Serverless

Since I only need this capability every once in a while, I could try a serverless solution. That would let me pay for the time the script is running without the premium of someone's turnkey solution. If I can use shot-scraper in a serverless environment that can receive a url and return an image, that would be golden. Then I can wire up a Drupal module around it.