-연유

Posted on Mar 2

How to Capture Website Screenshots with an API (SnapRender Tutorial)

#javascript #webdev #tutorial #api

Need to programmatically capture website screenshots, generate PDFs, or extract metadata? In this tutorial, I'll show you how to do it in seconds using the SnapRender API on RapidAPI.

Why Use a Screenshot API?

Building browser automation from scratch (Puppeteer, Playwright, Selenium) is painful:

Heavy dependencies (~400MB Chrome binary)
Memory-hungry headless browsers
Crash handling, timeout management
Server maintenance and scaling

SnapRender handles all of this for you. One API call = one screenshot. No infrastructure needed.

Getting Started

Subscribe (free tier available): SnapRender on RapidAPI
Get your API key from the dashboard
Start making requests

Example 1: Screenshot a Website

curl --request GET \
  --url 'https://snaprender1.p.rapidapi.com/screenshot?url=https://github.com&format=png' \
  --header 'x-rapidapi-host: snaprender1.p.rapidapi.com' \
  --header 'x-rapidapi-key: YOUR_API_KEY' \
  --output screenshot.png

The response is a binary PNG file. Save it directly.

Example 2: Mobile Screenshot

curl --request GET \
  --url 'https://snaprender1.p.rapidapi.com/screenshot?url=https://github.com&device=mobile&dark_mode=true' \
  --header 'x-rapidapi-host: snaprender1.p.rapidapi.com' \
  --header 'x-rapidapi-key: YOUR_API_KEY' \
  --output mobile-dark.png

Example 3: Full Page Capture

curl --request GET \
  --url 'https://snaprender1.p.rapidapi.com/screenshot?url=https://news.ycombinator.com&full_page=true&block_ads=true' \
  --header 'x-rapidapi-host: snaprender1.p.rapidapi.com' \
  --header 'x-rapidapi-key: YOUR_API_KEY' \
  --output fullpage.png

Auto-scrolls the page to trigger lazy-loaded content, then captures everything.

Example 4: Generate PDF

curl --request GET \
  --url 'https://snaprender1.p.rapidapi.com/pdf?url=https://example.com' \
  --header 'x-rapidapi-host: snaprender1.p.rapidapi.com' \
  --header 'x-rapidapi-key: YOUR_API_KEY' \
  --output page.pdf

Example 5: Render HTML to Image

Perfect for generating invoices, certificates, or reports:

curl --request POST \
  --url 'https://snaprender1.p.rapidapi.com/render' \
  --header 'content-type: application/json' \
  --header 'x-rapidapi-host: snaprender1.p.rapidapi.com' \
  --header 'x-rapidapi-key: YOUR_API_KEY' \
  --data '{
    "html": "<div style=\"padding:40px;font-family:Arial\"><h1>Invoice #1234</h1><p>Amount: $99.00</p></div>",
    "format": "png",
    "width": 800,
    "output": "base64"
  }'

Returns JSON with base64-encoded image data.

Example 6: Extract Page Metadata (Scrape)

curl --request GET \
  --url 'https://snaprender1.p.rapidapi.com/scrape?url=https://github.com' \
  --header 'x-rapidapi-host: snaprender1.p.rapidapi.com' \
  --header 'x-rapidapi-key: YOUR_API_KEY'

Returns:

{
  "title": "GitHub",
  "description": "Where the world builds software",
  "og_title": "GitHub",
  "og_image": "https://github.githubassets.com/images/modules/site/social-cards/...",
  "twitter_card": "summary_large_image",
  "favicon": "https://github.com/favicon.ico",
  "lang": "en"
}

Great for building link preview cards (like Slack/Discord unfurls).

Node.js Example

const axios = require('axios');

async function screenshot(url) {
  const response = await axios({
    method: 'GET',
    url: 'https://snaprender1.p.rapidapi.com/screenshot',
    params: { url, format: 'png', device: 'desktop' },
    headers: {
      'x-rapidapi-key': 'YOUR_API_KEY',
      'x-rapidapi-host': 'snaprender1.p.rapidapi.com'
    },
    responseType: 'arraybuffer'
  });

  require('fs').writeFileSync('screenshot.png', response.data);
  console.log('Screenshot saved!');
}

screenshot('https://github.com');

Python Example

import requests

url = "https://snaprender1.p.rapidapi.com/screenshot"
params = {"url": "https://github.com", "format": "png"}
headers = {
    "x-rapidapi-key": "YOUR_API_KEY",
    "x-rapidapi-host": "snaprender1.p.rapidapi.com"
}

response = requests.get(url, headers=headers, params=params)

with open("screenshot.png", "wb") as f:
    f.write(response.content)
print("Screenshot saved!")

All Available Parameters

Parameter	Default	Description
`url`	required	Target URL
`format`	`png`	`png` or `jpg`
`width`	`1280`	Viewport width (320-3840)
`height`	`800`	Viewport height (200-2160)
`full_page`	`false`	Capture entire scrollable page
`device`	`desktop`	`desktop`, `mobile`, `tablet`
`dark_mode`	`false`	Force dark color scheme
`block_ads`	`true`	Remove ads and cookie banners
`delay`	`0`	Wait time in ms (0-10000)
`quality`	`80`	JPG quality (1-100)
`retina`	`false`	2x resolution
`selector`	-	CSS selector to capture
`wait_for`	-	Wait for element before capture
`output`	`binary`	`binary` or `base64`
`inject_css`	-	Custom CSS to inject
`inject_js`	-	Custom JS to execute

DEV Community