https://github.com/stevelacey/cloudflare-screenshot
🌇 Screenshot webpages using Puppeteer on Cloudflare
https://github.com/stevelacey/cloudflare-screenshot
puppeteer puppeteer-screenshot screenshot-generator screenshot-utility social-media
Last synced: 3 months ago
JSON representation
🌇 Screenshot webpages using Puppeteer on Cloudflare
- Host: GitHub
- URL: https://github.com/stevelacey/cloudflare-screenshot
- Owner: stevelacey
- Created: 2024-04-24T04:36:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-04T05:09:36.000Z (10 months ago)
- Last Synced: 2025-04-29T04:43:12.609Z (5 months ago)
- Topics: puppeteer, puppeteer-screenshot, screenshot-generator, screenshot-utility, social-media
- Language: JavaScript
- Homepage:
- Size: 24.4 KB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Cloudflare Screenshot
=====================
Screenshot webpages to render social media cards on-the-fly using Puppeteer; largely based on [how Pieter generates shareable pictures](https://levels.io/phantomjs-social-media-share-pictures) for [Nomad List](https://nomadlist.com).
| [](https://coworkations.com/screenshots/cards/coworkations.png) [📄 HTML](https://coworkations.com/cards/coworkations) [🖼️ PNG](https://coworkations.com/screenshots/cards/coworkations.png) | [](https://coworkations.com/screenshots/cards/hacker-paradise/cape-town-south-africa.png) [📄 HTML](https://coworkations.com/cards/hacker-paradise/cape-town-south-africa) [🖼️ PNG](https://coworkations.com/screenshots/cards/hacker-paradise/cape-town-south-africa.png) |
| --: | --: |
| **[](https://coworkations.com/screenshots/cards/nomad-cruise/nomad-cruise-13-canada-to-japan-sep-2024.png) [📄 HTML](https://coworkations.com/cards/nomad-cruise/nomad-cruise-13-canada-to-japan-sep-2024) [🖼️ PNG](https://coworkations.com/screenshots/cards/nomad-cruise/nomad-cruise-13-canada-to-japan-sep-2024.png)** | **[](https://coworkations.com/screenshots/cards/pack/ubud-bali-2.png) [📄 HTML](https://coworkations.com/cards/pack/ubud-bali-2) [🖼️ PNG](https://coworkations.com/screenshots/cards/pack/ubud-bali-2.png)** |
Setup
-----
Deploy the worker to Cloudflare and mount it on a route like `example.com/screenshots/*`, then visit `screenshots/path/to/something.png` for a capture of `path/to/something`.
[](https://deploy.workers.cloudflare.com/?url=https://github.com/stevelacey/cloudflare-screenshot)
Usage
-----
Screenshots can be of any webpage, you can pass query params through to your backend if you need to toggle behaviors like to force dark mode on/off, or disable things like Intercom:
| 🖼 PNG (Cloudflare request) | 📄 HTML (webserver request) |
| :-- | :-- |
| https://coworkations.com/screenshots/hacker-paradise.png | https://coworkations.com/hacker-paradise |
| https://steve.ly/screenshots/home.png?dark=on | https://steve.ly/home?dark=on |
For social media cards you might want to render a template that works well on social media:
| 🖼 PNG (Cloudflare request) | 📄 HTML (webserver request) |
| :-- | :-- |
| https://coworkations.com/screenshots/cards/hacker-paradise.png | https://coworkations.com/cards/hacker-paradise |
| https://coworkations.com/screenshots/cards/pack/ubud-bali-2.png | https://coworkations.com/cards/pack/ubud-bali-2 |
The default dimensions for screenshots are 1200x630, which works well for most social media cards. You can specify different dimensions via the URL, e.g., `screenshots/1024x768/path/to/something.png`.
Additionally, you can adjust the pixel density by appending `@2x`, `@3x`, or `@4x` to the filename, e.g., `screenshots/path/to/something@2x.png`.
If you want to configure some query params to always pass through to your backend, you can set the `QUERY_PARAMS` environment variable and they will be appended to every webserver request.
Markup
------
You’ll probably want meta tags something like these:
```html
```
Debugging
---------
- [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug)
- [Twitter Card Validator](https://cards-dev.twitter.com/validator)