Capturez des captures d'écran de sites Web avec un seul appel API

Vous avez besoin d'une capture d'écran d'une page Web. Peut-être que vous créez des aperçus de liens pour une application de chat. Peut-être que vous exécutez des tests de régression visuelle dans CI. Peut-être que vous générez des rapports PDF qui intègrent un instantané de tableau de bord en direct. La réponse évidente est Marionnettiste ou Dramaturge. votre serveur. Le problème évident : un binaire Chromium sans tête consomme 200 à 500 Mo de mémoire, prend 3 à 8 secondes pour démarrer à froid, nécessite des dépendances au niveau du système d'exploitation et transforme votre image Docker dans un artefact de 1 Go. Tout cela pour capturer des captures d'écran de sites Web par programme.

Il existe un chemin plus simple. Envoyez l'URL à une API de capture d'écran, récupérez une image. Pas de navigateur binaire sur votre serveur, pas de pics de mémoire, pas de divergence de version de Chromium entre les environnements.

Capturez une capture d'écran d'un site Web avec une seule requête POST

Envoyez une URL au /v1/screenshot/capture point final et récupérer une capture d'écran au format PNG, JPEG ou WebP. L'API exécute une instance Chromium complète sur le réseau périphérique de Cloudflare, Ainsi, toutes les polices JavaScript, CSS et Web s'affichent correctement.

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"
  }'

Réponse:

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

La réponse vous donne une URL directe vers l'image capturée ainsi que le format, les dimensions, et la taille du fichier. Vous pouvez télécharger, mettre en cache ou diffuser cette URL directement dans votre application. Non Décodage base64 ou gestion de fichiers requis.

Contrôler la fenêtre d'affichage, le format et le timing

La capture d'écran par défaut capture une fenêtre d'affichage 1 280 x 800 au format PNG. Cela couvre la plupart des utilisations cas, mais vous aurez souvent besoin de plus de contrôle. Voici les paramètres que vous pouvez définir :

• largeur/hauteur : Dimensions de la fenêtre en pixels. Utilisez 1440x900 pour le bureau, 390x844 pour iPhone 14 ou 768x1024 pour iPad.
• format: Sortie en tant que png (sans perte, plus grand), jpeg (avec perte, plus petit), ou webp (meilleure compression pour une utilisation web).
• page complète : Régler sur true pour capturer la totalité de la page défilante, pas seulement ce qui rentre dans la fenêtre. L'API fait défiler la page et assemble le résultat en une grande image.
• retard: Millisecondes à attendre après le chargement de la page avant la capture. Réglez ceci sur 2000-3000 pour les SPA qui récupèrent les données lors du montage et du rendu côté client. Sans cela, vous capture d'écran une fileuse de chargement.

Voici une requête qui capture une capture d'écran WebP pleine page d'un SPA rendu en JavaScript avec un délai de 3 secondes :

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
  }'

Générez des aperçus de liens pour votre application

Les aperçus de liens sont l'une des raisons les plus courantes pour capturer des captures d'écran de pages Web. par programmation. Lorsqu'un utilisateur colle une URL dans votre application de chat, votre CMS ou votre gestion de projet outil, vous souhaitez afficher une vignette. Les images Open Graph couvrent certains liens, mais de nombreuses pages ne les définissez pas, et ceux qui le font utilisent souvent des images de marque génériques au lieu de la page réelle contenu.

Ce serveur Node.js expose un /preview point de terminaison qui capture et met en cache vignettes à 1 200 x 630 (la taille d'image standard d'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);

Appel /preview?url=https://stripe.com/docs et vous récupérez une vignette WebP URL affichant le contenu réel de la page. Le cache en mémoire empêche les captures en double pour la même URL. En production, échangez ça Map pour Redis ou un cache CDN avec un TTL de 24 à 48 heures pour que les aperçus restent à jour.

Tests de régression visuelle en CI

Les tests de régression visuelle détectent les ruptures de mise en page que les tests unitaires manquent. Un changement CSS qui réussit tous les tests peut toujours faire sortir le titre de votre page de tarification hors de l'écran. Le traditionnel L'approche nécessite Playwright et un navigateur sans tête exécuté dans votre exécuteur CI. Cela ajoute 2-3 minutes à votre pipeline et utilise plus de 500 Mo de disque.

Ce workflow GitHub Actions capture des captures d'écran des pages clés de la production et votre aperçu PR, puis génère un tableau de comparaison dans le résumé PR :

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

Le flux de travail capture quatre pages de votre site de production et l'URL d'aperçu des relations publiques. Les URL de capture d'écran sont enregistrées dans le résumé de l'étape GitHub sous forme de tableau de comparaison afin que les réviseurs peut vérifier visuellement chaque page. Pas de binaires de navigateur dans CI, pas de configuration Playwright, pas de Docker mise en cache des couches.

Pour une comparaison automatisée au niveau des pixels, dirigez les URL de capture d'écran vers un outil de comparaison tel que pixelmatch ou resemblejs et échouer le flux de travail si la différence dépasse un seuil.

Comparaison : API de capture d'écran et Puppeteer auto-hébergé

L'exécution de votre propre navigateur sans interface graphique vous donne un contrôle total, mais ce contrôle s'accompagne de coût opérationnel. Voici comment les deux approches se comparent :

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

L'API gagne en termes de vitesse d'installation et de maintenance. Le Marionnettiste auto-hébergé gagne quand vous en avez besoin contrôle précis du navigateur (interception des requêtes réseau, injection de cookies pour pages authentifiées ou exécution de JavaScript personnalisé avant la capture). Pour la plupart des captures d'écran cas d'utilisation ; aperçus de liens, tests visuels, vignettes de rapports, cartes sociales ; l'API Cette approche couvre ce dont vous avez besoin sans les frais généraux d'infrastructure.

Points clés

- 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

Le niveau gratuit à 5 requêtes par minute fonctionne pour le développement, le prototypage et le faible trafic aperçus des liens. Pour les pipelines CI et les applications de production nécessitant un débit plus élevé, ajoutez votre Clé API dans le Authorization: Bearer en-tête. Vérifiez le Documents sur l'API pour la référence complète des paramètres et le schéma de réponse.