This pipeline powers Canva preview images for House Updates via /api/canva-image.
How it works
When an update includes a Canva link, the site requests:
/api/canva-image?url=<canva-public-url>
The Pages Function attempts:
- Extracting a preview image from Canva HTML
- Falling back to a screenshot service if the HTML is dynamic
Setup options
Option 1: No setup (basic)
The function attempts to extract images directly from Canva HTML. This works for some designs but fails for JavaScript-rendered pages.
Option 2: Screenshot service (recommended)
Configure a screenshot API for reliable previews.
Example provider: htmlcsstoimage.com
Steps:
- Create an account and get API credentials
- Add the credentials as runtime environment variables in Cloudflare Pages
- Confirm
/api/canva-imagecalls the screenshot API when extraction fails
Operational notes
- Use runtime environment variables in Cloudflare Pages, not build-time vars.
- Ensure Canva links are public and accessible without authentication.