Делайте снимки экрана веб-сайта одним вызовом API

Вам нужен скриншот веб-страницы. Возможно, вы создаете предварительный просмотр ссылок для приложения чата. Возможно, вы проводите тесты визуальной регрессии в CI. Возможно, вы создаете отчеты в формате PDF. которые встраивают живой снимок информационной панели. Очевидный ответ – Кукольник или Драматург. ваш сервер. Очевидная проблема: безголовый бинарный файл Chromium съедает 200-500 МБ памяти, Холодный запуск занимает 3–8 секунд, требует зависимостей на уровне ОС и превращает ваш образ Docker в артефакт размером 1 ГБ. Все это для программного создания снимков экрана веб-сайта.

Есть более простой путь. Отправьте URL-адрес в API скриншотов и получите изображение. Нет браузера двоичный файл на вашем сервере, никаких скачков памяти, никаких несоответствий версий Chromium в разных средах.

Сделайте снимок экрана веб-сайта с помощью одного POST-запроса.

Отправьте URL-адрес на /v1/screenshot/capture конечная точка и получить снимок экрана в формате PNG, JPEG или WebP. API запускает полный экземпляр Chromium в периферийной сети Cloudflare. поэтому все шрифты JavaScript, CSS и веб-шрифты отображаются правильно.

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

Ответ:

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

В ответе вы получите прямой URL-адрес захваченного изображения, а также его формат, размеры и и размер файла. Вы можете загрузить, кэшировать или использовать этот URL-адрес непосредственно в своем приложении. Нет Требуется декодирование base64 или обработка файлов.

Управление областью просмотра, форматом и временем просмотра

Скриншот по умолчанию представляет собой область просмотра 1280x800 в формате PNG. Это охватывает большую часть использования случаях, но вам часто потребуется больше контроля. Вот параметры, которые вы можете установить:

• ширина/высота: Размеры области просмотра в пикселях. Используйте разрешение 1440x900 для рабочего стола, 390x844 для iPhone 14 или 768x1024 для iPad.
• формат: Вывод как png (без потерь, больше), jpeg (с потерями, меньше), или webp (лучшее сжатие для использования в Интернете).
• полная страница: Установить на true чтобы захватить всю прокручиваемую страницу, не только то, что помещается в окне просмотра. API прокручивает страницу и сшивает результат в одно высокое изображение.
• задерживать: Миллисекунды ожидания после загрузки страницы перед записью. Установите это на 2000–3000 для SPA, которые извлекают данные при монтировании и визуализируют на стороне клиента. Без этого вы будете скриншот экрана загрузки.

Вот запрос, который захватывает полностраничный скриншот WebP SPA, отображаемого на JavaScript. с задержкой в 3 секунды:

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

Создайте предварительный просмотр ссылок для вашего приложения

Предварительный просмотр ссылок — одна из наиболее распространенных причин для создания снимков экрана веб-страниц. программно. Когда пользователь вставляет URL-адрес в ваше приложение чата, CMS или систему управления проектами. инструмент, вы хотите показать миниатюру. Изображения Open Graph закрывают некоторые ссылки, но многие страницы не устанавливайте их, а те, которые устанавливают, часто используют общие изображения бренда вместо реальной страницы. содержание.

Этот сервер Node.js предоставляет /preview конечная точка, которая захватывает и кэширует миниатюры размером 1200x630 (стандартный размер изображения 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);

Вызов /preview?url=https://stripe.com/docs и вы получите миниатюру WebP URL-адрес, показывающий фактическое содержимое страницы. Кэш в памяти предотвращает дублирование захватов для тот же URL. В производстве поменяйте это местами Map для Redis или кеша CDN с Срок жизни 24–48 часов, поэтому превью всегда актуальны.

Визуальное регрессионное тестирование в CI

Визуальное регрессионное тестирование выявляет дефекты макета, которые упускают из виду модульные тесты. Изменение CSS, которое пройдя все тесты, вы все равно можете вывести заголовок страницы с ценами за пределы экрана. Традиционный Для этого подхода требуется драматург и безголовый браузер, работающий в вашем CI-раннере. Это добавляет 2-3 минут на ваш конвейер и использует более 500 МБ дискового пространства.

Этот рабочий процесс GitHub Actions захватывает снимки экрана ключевых страниц как из рабочей, так и из рабочей среды. предварительный просмотр PR, а затем выводит сравнительную таблицу в сводке 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

Рабочий процесс захватывает четыре страницы вашего рабочего сайта и URL-адрес предварительного просмотра PR. URL-адреса снимков экрана записываются в сводку шагов GitHub в виде сравнительной таблицы, поэтому рецензенты можно визуально проверить каждую страницу. Никаких двоичных файлов браузера в CI, никаких настроек Playwright и Docker. кэширование слоев.

Для автоматического различия на уровне пикселей передайте URL-адреса снимков экрана в инструмент сравнения, например pixelmatch или resemblejs и провалить рабочий процесс, если разница превышает порог.

Сравнение: API скриншотов и самостоятельный Puppeteer

Запуск собственного безголового браузера дает вам полный контроль, но этот контроль включает в себя эксплуатационные расходы. Вот как сочетаются эти два подхода:

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

API выигрывает по скорости установки и обслуживанию. Самостоятельный Puppeteer побеждает, когда вам нужно детальный контроль браузера (перехват сетевых запросов, внедрение файлов cookie для аутентифицированные страницы или запуск пользовательского JavaScript перед захватом). Для большинства скриншотов варианты использования; предварительный просмотр ссылок, визуальное тестирование, миниатюры отчетов, социальные карточки; API подход охватывает то, что вам нужно, без затрат на инфраструктуру.

Ключевые моменты

- 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

Уровень бесплатного пользования со скоростью 5 запросов в минуту подходит для разработки, прототипирования и работы с низким трафиком. превью ссылок. Для конвейеров CI и производственных приложений, которым требуется более высокая пропускная способность, добавьте API-ключ в Authorization: Bearer заголовок. Проверьте Документация по API для полной ссылки на параметры и схемы ответа.