Tangkap tangkapan layar situs web dengan satu panggilan API

Anda memerlukan tangkapan layar halaman web. Mungkin Anda sedang membuat pratinjau tautan untuk aplikasi obrolan. Mungkin Anda menjalankan tes regresi visual di CI. Mungkin Anda membuat laporan PDF yang menyematkan cuplikan dasbor langsung. Jawaban yang jelas adalah Dalang atau Penulis Drama server Anda. Masalah yang jelas: biner Chromium tanpa kepala memakan memori 200-500 MB, membutuhkan waktu 3-8 detik untuk memulai, memerlukan dependensi tingkat OS, dan mengubah image Docker Anda menjadi artefak 1 GB. Semua itu untuk menangkap tangkapan layar situs web secara terprogram.

Ada jalan yang lebih sederhana. Kirim URL ke API tangkapan layar, dapatkan kembali gambarnya. Tanpa peramban biner di server Anda, tidak ada lonjakan memori, tidak ada ketidakcocokan versi Chromium di seluruh lingkungan.

Ambil tangkapan layar situs web dengan satu permintaan POST

Kirim URL ke /v1/screenshot/capture titik akhir dan dapatkan kembali tangkapan layar sebagai PNG, JPEG, atau WebP. API menjalankan instance Chromium lengkap di jaringan edge Cloudflare, jadi semua JavaScript, CSS, dan font web ditampilkan dengan benar.

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

Tanggapan:

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

Responsnya memberi Anda URL langsung ke gambar yang diambil beserta format, dimensi, dan ukuran file. Anda dapat mengunduh, menyimpan cache, atau menyajikan URL tersebut langsung di aplikasi Anda. Tidak decoding base64 atau penanganan file diperlukan.

Kontrol area pandang, format, dan waktu

Tangkapan layar default menangkap area pandang 1280x800 dalam format PNG. Itu mencakup sebagian besar penggunaan banyak kasus, namun Anda sering kali memerlukan kontrol lebih besar. Berikut adalah parameter yang dapat Anda atur:

• lebar tinggi: Dimensi area pandang dalam piksel. Gunakan 1440x900 untuk desktop, 390x844 untuk iPhone 14, atau 768x1024 untuk iPad.
• format: Keluaran sebagai png (tanpa kerugian, lebih besar), jpeg (lossy, lebih kecil), atau webp (kompresi terbaik untuk penggunaan web).
• halaman penuh: Setel ke true untuk menangkap seluruh halaman yang dapat digulir, tidak hanya yang sesuai dengan viewport. API menggulir halaman dan menggabungkannya menghasilkan satu gambar tinggi.
• menunda: Milidetik untuk menunggu setelah halaman dimuat sebelum diambil. Setel ini ke 2000-3000 untuk SPA yang mengambil data saat dipasang dan dirender di sisi klien. Tanpa itu, Anda akan melakukannya tangkapan layar pemintal pemuatan.

Berikut permintaan yang mengambil tangkapan layar WebP satu halaman penuh dari SPA yang dirender JavaScript dengan penundaan 3 detik:

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

Hasilkan pratinjau tautan untuk aplikasi Anda

Pratinjau tautan adalah salah satu alasan paling umum untuk mengambil tangkapan layar laman web secara terprogram. Saat pengguna menempelkan URL di aplikasi chat, CMS, atau manajemen proyek Anda alat, Anda ingin menampilkan thumbnail. Gambar Open Graph mencakup beberapa tautan, tetapi banyak halaman jangan atur, dan yang sering menggunakan gambar merek umum, bukan halaman sebenarnya konten.

Server Node.js ini mengekspos a /preview titik akhir yang menangkap dan menyimpan cache thumbnail pada 1200x630 (ukuran gambar Open Graph standar):

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);

Panggilan /preview?url=https://stripe.com/docs dan Anda mendapatkan kembali thumbnail WebP URL yang menampilkan konten halaman sebenarnya. Cache dalam memori mencegah pengambilan duplikat URL yang sama. Dalam produksi, tukar itu Map untuk Redis atau cache CDN dengan a TTL 24-48 jam sehingga pratinjau tetap segar.

Pengujian regresi visual di CI

Pengujian regresi visual menangkap kerusakan tata letak yang terlewatkan oleh pengujian unit. Sebuah CSS mengubahnya lulus semua pengujian masih dapat menampilkan judul halaman harga Anda di luar layar. Yang tradisional Pendekatan ini memerlukan Penulis Drama dan browser tanpa kepala yang berjalan di pelari CI Anda. Itu menambah 2-3 menit ke saluran Anda dan menggunakan 500+ MB disk.

Alur kerja Tindakan GitHub ini menangkap tangkapan layar halaman utama dari produksi dan pratinjau PR Anda, lalu menampilkan tabel perbandingan di ringkasan 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

Alur kerja menangkap empat halaman dari situs produksi Anda dan URL pratinjau PR. URL tangkapan layar dicatat ke ringkasan langkah GitHub sebagai tabel perbandingan jadi peninjau dapat memeriksa setiap halaman secara visual. Tidak ada biner browser di CI, tidak ada pengaturan Playwright, tidak ada Docker cache lapisan.

Untuk pembedaan tingkat piksel otomatis, masukkan URL tangkapan layar ke alat perbandingan seperti pixelmatch atau resemblejs dan gagalkan alur kerja jika ada perbedaan melebihi ambang batas.

Perbandingan: API tangkapan layar vs Dalang yang dihosting sendiri

Menjalankan browser tanpa kepala Anda sendiri memberi Anda kendali penuh, namun kendali itu datang bersamanya biaya operasional. Berikut adalah bagaimana kedua pendekatan tersebut disusun:

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 menang dalam hal kecepatan penyiapan dan pemeliharaan. Dalang yang dihosting sendiri menang saat Anda membutuhkannya kontrol browser yang terperinci (mencegat permintaan jaringan, memasukkan cookie untuk halaman yang diautentikasi, atau menjalankan JavaScript khusus sebelum pengambilan). Untuk sebagian besar tangkapan layar kasus penggunaan; pratinjau tautan, pengujian visual, gambar kecil laporan, kartu sosial; APInya Pendekatan ini mencakup apa yang Anda perlukan tanpa biaya tambahan infrastruktur.

Poin-poin penting

- 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

Tingkat gratis dengan 5 permintaan per menit berfungsi untuk pengembangan, pembuatan prototipe, dan lalu lintas rendah pratinjau tautan. Untuk pipeline CI dan aplikasi produksi yang memerlukan throughput lebih tinggi, tambahkan Kunci API di Authorization: Bearer tajuk. Periksa dokumen API untuk referensi parameter lengkap dan skema respons.