Capture capturas de pantalla del sitio web con una llamada API

Necesita una captura de pantalla de una página web. Quizás esté creando vistas previas de enlaces para una aplicación de chat. Quizás esté ejecutando pruebas de regresión visual en CI. Quizás estés generando informes en PDF que incorpora una instantánea del panel en vivo. La respuesta obvia es Titiritero o Dramaturgo en su servidor. El problema obvio: un binario Chromium sin cabeza consume entre 200 y 500 MB de memoria, tarda entre 3 y 8 segundos en iniciarse en frío, necesita dependencias a nivel del sistema operativo y convierte la imagen de Docker en un artefacto de 1 GB. Todo eso para capturar capturas de pantalla del sitio web mediante programación.

Hay un camino más sencillo. Envíe la URL a una API de captura de pantalla y obtenga una imagen. Sin navegador binario en su servidor, sin picos de memoria, sin discrepancias en las versiones de Chromium entre entornos.

Capture una captura de pantalla del sitio web con una solicitud POST

Enviar una URL al /v1/screenshot/capture punto final y obtener una captura de pantalla como PNG, JPEG o WebP. La API ejecuta una instancia completa de Chromium en la red perimetral de Cloudflare. para que todas las fuentes JavaScript, CSS y web se representen correctamente.

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

Respuesta:

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

La respuesta le brinda una URL directa a la imagen capturada junto con el formato, dimensiones, y tamaño del archivo. Puede descargar, almacenar en caché o publicar esa URL directamente en su aplicación. No Se requiere decodificación base64 o manejo de archivos.

Controlar la ventana gráfica, el formato y el tiempo

La captura de pantalla predeterminada captura una ventana gráfica de 1280x800 en formato PNG. Eso cubre la mayor parte del uso. casos, pero a menudo necesitarás más control. Estos son los parámetros que puede configurar:

• ancho/alto: Dimensiones de la ventana gráfica en píxeles. Utilice 1440x900 para escritorio, 390x844 para iPhone 14 o 768x1024 para iPad.
• formato: Salida como png (sin pérdidas, más grande), jpeg (con pérdida, más pequeño), o webp (mejor compresión para uso web).
• página completa: Empezar a true para capturar toda la página desplazable, no sólo lo que cabe en la ventana gráfica. La API se desplaza por la página y une la resultado en una imagen alta.
• demora: Milisegundos de espera después de cargar la página antes de capturarla. Establezca esto en 2000-3000 para SPA que obtienen datos en el montaje y renderizan en el lado del cliente. Sin él, captura de pantalla de una ruleta de carga.

Aquí hay una solicitud que captura una captura de pantalla WebP de página completa de un SPA renderizado con JavaScript con un retraso de 3 segundos:

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

Genera vistas previas de enlaces para tu aplicación

Las vistas previas de enlaces son una de las razones más comunes para realizar capturas de pantalla de páginas web. programáticamente. Cuando un usuario pega una URL en su aplicación de chat, CMS o gestión de proyectos herramienta, desea mostrar una miniatura. Las imágenes de Open Graph cubren algunos enlaces, pero muchas páginas. no los configures, y los que sí lo hacen suelen utilizar imágenes de marca genéricas en lugar de la página real contenido.

Este servidor Node.js expone un /preview punto final que captura y almacena en caché miniaturas a 1200x630 (el tamaño de imagen estándar de 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);

Llamar /preview?url=https://stripe.com/docs y obtienes una miniatura WebP URL que muestra el contenido real de la página. La caché en memoria evita capturas duplicadas de la misma URL. En producción, intercambie eso Map para Redis o un caché CDN con un TTL de 24 a 48 horas para que las vistas previas se mantengan actualizadas.

Pruebas de regresión visual en CI

Las pruebas de regresión visual detectan roturas en el diseño que las pruebas unitarias pasan por alto. Un cambio de CSS que pasa todas las pruebas aún puede sacar el título de su página de precios fuera de la pantalla. lo tradicional El enfoque necesita Playwright y un navegador sin cabeza que se ejecute en su corredor de CI. Eso suma 2-3 minutos a su canalización y utiliza más de 500 MB de disco.

Este flujo de trabajo de GitHub Actions captura capturas de pantalla de páginas clave tanto de producción como de su vista previa de relaciones públicas, luego genera una tabla de comparación en el resumen de relaciones públicas:

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

El flujo de trabajo captura cuatro páginas de su sitio de producción y la URL de vista previa de relaciones públicas. Las URL de captura de pantalla se registran en el resumen de pasos de GitHub como una tabla de comparación para que los revisores Puede comprobar visualmente cada página. Sin archivos binarios del navegador en CI, sin configuración de Playwright, sin Docker almacenamiento en caché de capas.

Para una diferenciación automática a nivel de píxeles, canalice las URL de las capturas de pantalla a una herramienta de comparación como pixelmatch o resemblejs y falla el flujo de trabajo si la diferencia supera un umbral.

Comparación: API de captura de pantalla y Puppeteer autohospedado

Ejecutar su propio navegador sin cabeza le brinda control total, pero ese control viene con costo operativo. Así es como se comparan los dos enfoques:

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

La API gana en velocidad de configuración y mantenimiento. Puppeteer autohospedado gana cuando lo necesita control detallado del navegador (interceptando solicitudes de red, inyectando cookies para páginas autenticadas o ejecutar JavaScript personalizado antes de la captura). Para la mayoría de las capturas de pantalla casos de uso; vistas previas de enlaces, pruebas visuales, miniaturas de informes, tarjetas sociales; la API Este enfoque cubre lo que necesita sin los gastos generales de infraestructura.

Puntos clave

- 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

El nivel gratuito de 5 solicitudes por minuto funciona para desarrollo, creación de prototipos y poco tráfico. vistas previas de enlaces. Para canalizaciones de CI y aplicaciones de producción que necesitan un mayor rendimiento, agregue su Clave API en el Authorization: Bearer encabezamiento. Compruebe el Documentos API para obtener la referencia completa de parámetros y el esquema de respuesta.