Erfassen Sie Website-Screenshots mit einem API-Aufruf

Sie benötigen einen Screenshot einer Webseite. Vielleicht erstellen Sie Linkvorschauen für eine Chat-App. Möglicherweise führen Sie visuelle Regressionstests in CI durch. Möglicherweise erstellen Sie PDF-Berichte die einen Live-Dashboard-Snapshot einbetten. Die offensichtliche Antwort ist Puppenspieler oder Dramatiker Ihr Server. Das offensichtliche Problem: Eine kopflose Chromium-Binärdatei verbraucht 200–500 MB Speicher. Der Kaltstart dauert 3–8 Sekunden, benötigt Abhängigkeiten auf Betriebssystemebene und verwandelt Ihr Docker-Image in ein 1-GB-Artefakt. All das, um Website-Screenshots programmgesteuert zu erfassen.

Es gibt einen einfacheren Weg. Senden Sie die URL an eine Screenshot-API und erhalten Sie ein Bild zurück. Kein Browser binär auf Ihrem Server, keine Speicherspitzen, keine Nichtübereinstimmungen der Chromium-Versionen in verschiedenen Umgebungen.

Erfassen Sie einen Website-Screenshot mit einer POST-Anfrage

Senden Sie eine URL an die /v1/screenshot/capture Endpunkt und erhalten Sie einen Screenshot zurück als PNG, JPEG oder WebP. Die API führt eine vollständige Chromium-Instanz im Edge-Netzwerk von Cloudflare aus. sodass alle JavaScript-, CSS- und Web-Schriftarten korrekt dargestellt werden.

curl -X POST https://api.botoi.com/v1/screenshot/capture \\
  -H "Content-Type: application/json" \\
  -d '{
    "url": "https://github.com",
    "width": 1280,
    "height": 800,
    "format": "png"
  }'

Antwort:

{
  "success": true,
  "data": {
    "url": "https://api.botoi.com/screenshots/a1b2c3d4.png",
    "format": "png",
    "width": 1280,
    "height": 800,
    "fullPage": false,
    "size_bytes": 184320
  }
}

Die Antwort gibt Ihnen eine direkte URL zum aufgenommenen Bild sowie das Format, die Abmessungen usw. und Dateigröße. Sie können diese URL direkt in Ihrer Anwendung herunterladen, zwischenspeichern oder bereitstellen. Nein Base64-Dekodierung oder Dateiverwaltung erforderlich.

Steuern Sie Ansichtsfenster, Format und Timing

Der Standard-Screenshot erfasst ein 1280x800-Ansichtsfenster im PNG-Format. Das deckt den größten Teil der Nutzung ab Fällen, aber oft benötigen Sie mehr Kontrolle. Hier sind die Parameter, die Sie einstellen können:

• Breite / Höhe: Abmessungen des Ansichtsfensters in Pixel. Verwenden Sie 1440 x 900 für den Desktop. 390 x 844 für iPhone 14 oder 768 x 1024 für iPad.
• Format: Ausgabe als png (verlustfrei, größer), jpeg (verlustbehaftet, kleiner), oder webp (beste Komprimierung für die Webnutzung).
• ganze Seite: Stellen Sie auf ein true um die gesamte scrollbare Seite zu erfassen, nicht nur das, was in das Ansichtsfenster passt. Die API scrollt durch die Seite und fügt die zusammen Ergebnis zu einem großen Bild.
• Verzögerung: Millisekunden, die nach dem Laden der Seite vor der Erfassung gewartet werden sollen. Stellen Sie dies auf 2000–3000 für SPAs, die Daten beim Mounten und Rendern auf der Clientseite abrufen. Ohne es wirst du Screenshot eines Ladespinners.

Hier ist eine Anfrage, die einen ganzseitigen WebP-Screenshot eines mit JavaScript gerenderten SPA erfasst mit 3 Sekunden Verzögerung:

curl -X POST https://api.botoi.com/v1/screenshot/capture \\
  -H "Content-Type: application/json" \\
  -d '{
    "url": "https://your-spa.vercel.app",
    "width": 1440,
    "height": 900,
    "format": "webp",
    "fullPage": true,
    "delay": 3000
  }'

Generieren Sie Linkvorschauen für Ihre App

Linkvorschauen sind einer der häufigsten Gründe für die Aufnahme von Webseiten-Screenshots programmatisch. Wenn ein Benutzer eine URL in Ihre Chat-App, Ihr CMS oder Ihr Projektmanagement einfügt Mit dem Tool möchten Sie eine Miniaturansicht anzeigen. Open Graph-Bilder decken einige Links, aber viele Seiten ab Legen Sie sie nicht fest, und diejenigen, die dies tun, verwenden häufig generische Markenbilder anstelle einer tatsächlichen Seite Inhalt.

Dieser Node.js-Server stellt a bereit /preview Endpunkt, der erfasst und zwischenspeichert Miniaturansichten bei 1200 x 630 (die Standardbildgröße von Open Graph):

import express from "express";

const app = express();
app.use(express.json());

const screenshotCache = new Map();

async function captureScreenshot(url) {
  // Return cached version if available
  if (screenshotCache.has(url)) {
    return screenshotCache.get(url);
  }

  const res = await fetch("https://api.botoi.com/v1/screenshot/capture", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      url,
      width: 1200,
      height: 630,
      format: "webp",
    }),
  });

  const { data } = await res.json();
  screenshotCache.set(url, data.url);
  return data.url;
}

app.get("/preview", async (req, res) => {
  const { url } = req.query;

  if (!url) {
    return res.status(400).json({ error: "url parameter required" });
  }

  const thumbnailUrl = await captureScreenshot(url);
  res.json({
    original_url: url,
    thumbnail: thumbnailUrl,
    dimensions: "1200x630",
  });
});

app.listen(3000);

Anruf /preview?url=https://stripe.com/docs und Sie erhalten ein WebP-Miniaturbild zurück URL, die den tatsächlichen Seiteninhalt zeigt. Der In-Memory-Cache verhindert doppelte Erfassungen für die gleiche URL. Tauschen Sie das in der Produktion aus Map für Redis oder einen CDN-Cache mit einem TTL von 24–48 Stunden, damit Vorschauen aktuell bleiben.

Visuelle Regressionstests in CI

Visuelle Regressionstests erkennen Layoutfehler, die bei Unit-Tests übersehen werden. Ein CSS ändert das Wenn Sie alle Tests bestehen, kann die Überschrift auf Ihrer Preisseite immer noch aus dem Bild verschwinden. Das Traditionelle Der Ansatz erfordert Playwright und einen Headless-Browser, der in Ihrem CI-Runner ausgeführt wird. Das fügt 2-3 hinzu Minuten zu Ihrer Pipeline und verbraucht mehr als 500 MB Festplatte.

Dieser GitHub Actions-Workflow erfasst Screenshots wichtiger Seiten sowohl aus der Produktion als auch aus Ihre PR-Vorschau und gibt dann eine Vergleichstabelle in der PR-Zusammenfassung aus:

name: Visual regression check

on:
  pull_request:
    branches: [main]

jobs:
  screenshot-diff:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Capture baseline screenshots
        run: |
          PAGES=("/" "/pricing" "/docs" "/blog")
          BASE_URL="https://your-app.com"
          mkdir -p screenshots/baseline

          for PAGE in "\${PAGES[@]}"; do
            FILENAME=\$(echo "\$PAGE" | tr '/' '-' | sed 's/^-//')
            [ -z "\$FILENAME" ] && FILENAME="home"

            curl -s -X POST https://api.botoi.com/v1/screenshot/capture \\
              -H "Content-Type: application/json" \\
              -H "Authorization: Bearer \${{ secrets.BOTOI_API_KEY }}" \\
              -d "{
                \\"url\\": \\"\$BASE_URL\$PAGE\\",
                \\"width\\": 1280,
                \\"height\\": 800,
                \\"format\\": \\"png\\",
                \\"fullPage\\": true
              }" | jq -r '.data.url' > "screenshots/baseline/\$FILENAME.url"

            echo "Captured baseline: \$PAGE"
          done

      - name: Capture PR preview screenshots
        run: |
          PAGES=("/" "/pricing" "/docs" "/blog")
          PREVIEW_URL="\${{ github.event.pull_request.head.repo.html_url }}"
          mkdir -p screenshots/preview

          for PAGE in "\${PAGES[@]}"; do
            FILENAME=\$(echo "\$PAGE" | tr '/' '-' | sed 's/^-//')
            [ -z "\$FILENAME" ] && FILENAME="home"

            curl -s -X POST https://api.botoi.com/v1/screenshot/capture \\
              -H "Content-Type: application/json" \\
              -H "Authorization: Bearer \${{ secrets.BOTOI_API_KEY }}" \\
              -d "{
                \\"url\\": \\"\$PREVIEW_URL\$PAGE\\",
                \\"width\\": 1280,
                \\"height\\": 800,
                \\"format\\": \\"png\\",
                \\"fullPage\\": true
              }" | jq -r '.data.url' > "screenshots/preview/\$FILENAME.url"

            echo "Captured preview: \$PAGE"
          done

      - name: Compare screenshots
        run: |
          echo "## Visual regression report" >> \$GITHUB_STEP_SUMMARY
          echo "" >> \$GITHUB_STEP_SUMMARY

          for BASELINE in screenshots/baseline/*.url; do
            NAME=\$(basename "\$BASELINE" .url)
            BASELINE_URL=\$(cat "\$BASELINE")
            PREVIEW_URL=\$(cat "screenshots/preview/\$NAME.url")
            echo "| \$NAME | [baseline](\$BASELINE_URL) | [preview](\$PREVIEW_URL) |" >> \$GITHUB_STEP_SUMMARY
          done

Der Workflow erfasst vier Seiten Ihrer Produktionsseite und die PR-Vorschau-URL. Screenshot-URLs werden in der GitHub-Schrittzusammenfassung als Vergleichstabelle für Prüfer protokolliert kann jede Seite visuell überprüfen. Keine Browser-Binärdateien in CI, kein Playwright-Setup, kein Docker Layer-Caching.

Für eine automatisierte Unterscheidung auf Pixelebene leiten Sie die Screenshot-URLs an ein Vergleichstool weiter pixelmatch oder resemblejs und der Workflow schlägt fehl, wenn der Unterschied besteht einen Schwellenwert überschreitet.

Vergleich: Screenshot-API vs. selbstgehosteter Puppeteer

Wenn Sie Ihren eigenen Headless-Browser ausführen, haben Sie die volle Kontrolle, aber diese Kontrolle gehört auch dazu Betriebskosten. So kombinieren sich die beiden Ansätze:

Feature                  | Screenshot API             | Self-hosted Puppeteer
─────────────────────────|────────────────────────────|──────────────────────────
Setup time               | 0 min (one HTTP call)      | 30-60 min (Docker, deps)
Browser binary           | Managed by API             | You maintain Chromium
Memory usage             | 0 MB on your server        | 200-500 MB per instance
Cold start               | None (edge network)        | 3-8 sec (browser launch)
Scaling                  | Handled automatically      | Manual (container pool)
Maintenance              | None                       | OS patches, Chrome updates
Cost (low volume)        | Free (5 req/min)           | Server cost + your time
Cost (high volume)       | API plan (~\$20/mo)         | \$50-200/mo (server + ops)
Full-page capture        | Built-in parameter         | Custom scroll logic
Format options           | PNG, JPEG, WebP            | Depends on your code
JavaScript rendering     | Built-in delay param       | Custom waitForSelector

Die API überzeugt in puncto Einrichtungsgeschwindigkeit und Wartung. Der selbst gehostete Puppeteer gewinnt, wenn Sie es brauchen Detaillierte Browsersteuerung (Abfangen von Netzwerkanfragen, Einfügen von Cookies für authentifizierte Seiten oder Ausführen von benutzerdefiniertem JavaScript vor der Erfassung). Für die meisten Screenshots Anwendungsfälle; Linkvorschauen, visuelle Tests, Miniaturansichten von Berichten, Social Cards; die API Der Ansatz deckt alles ab, was Sie benötigen, ohne den Infrastruktur-Overhead.

Wichtige Punkte

- One POST request captures any public URL as PNG, JPEG, or WebP
- Viewport width, height, full-page mode, and JS delay are all configurable
- No Puppeteer, Chromium, or headless browser setup on your side
- Free tier: 5 screenshots per minute, no API key needed
- Use cases: link previews, visual regression testing, PDF reports, social cards
- The API runs Chromium on the edge, so JS-heavy SPAs render correctly

Die kostenlose Stufe mit 5 Anfragen pro Minute eignet sich für Entwicklung, Prototyping und geringen Datenverkehr Linkvorschauen. Für CI-Pipelines und Produktionsanwendungen, die einen höheren Durchsatz benötigen, fügen Sie Ihren hinzu API-Schlüssel im Authorization: Bearer Kopfzeile. Überprüfen Sie die API-Dokumente für die vollständige Parameterreferenz und das Antwortschema.