自动化网页截图：使用 PageOps Screenshot API

简介

手动截取网页截图既费时又不可靠。对于开发者来说，如果你在构建监控工具、可视化回归测试、竞争对手跟踪系统或网络爬虫和数据采集管道，你需要一种 可编程的方式 来捕获网页截图。

使用 Screenshot API，你只需发送一个 HTTP 请求，就能获取网页渲染后的截图。API 会在云端运行无头浏览器（Headless Browser），无需管理任何基础设施。

为什么开发者需要网页截图

自动化截图在现代应用中非常常见，主要用途包括：

网站监控：定期抓取网页截图，检测 UI 变化、页面布局异常和网站宕机。
可视化回归测试：QA 团队可以对比不同部署版本的截图，发现 UI Bug。
网络爬虫和数据采集：对复杂网页，截图可能比解析 DOM 更简单可靠。
社交媒体预览生成：自动生成 OpenGraph、Twitter Card 或网页链接预览图。

Screenshot API 工作原理

使用 Screenshot API 非常简单：

发送请求并指定目标 URL
云端无头浏览器渲染页面
API 捕获截图
返回截图或截图 URL

JavaScript 调用示例

const response = await fetch("https://api.page-ops.com/api/v1/screenshots", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_KEY"
  },
  body: JSON.stringify({
    url: "https://example.com",
    mode: "sync",
    timeoutMs: 8000,
    fullPage: false
  })
});

const data = await response.json();
console.log(data.result?.url);

cURL 调用示例

curl -X POST "https://api.page-ops.com/api/v1/screenshots" \
  -H "Authorization: Bearer $SCREENSHOT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "mode": "sync",
    "timeoutMs": 8000,
    "fullPage": false
  }'

注意：同步模式（mode=sync）下，fullPage 必须为 false，timeoutMs 必须在 0–10000 毫秒之间。否则服务器会自动回退为异步模式。

高级截图选项

Screenshot API 支持丰富的自定义参数：

全页截图：捕获整个页面（异步模式下可用）。
自定义视口：模拟桌面、手机、平板等设备。
等待条件：等待特定 DOM 元素或网络请求完成再截图。
选择元素截图：只截取页面中某个指定元素。
Headers & Cookies：传递身份认证信息或会话 cookie。
延迟截图：使用 delayMs 可在页面加载完成后增加延迟。

{
  "url": "https://example.com/pricing",
  "selector": "#pricing"
}

同步与异步调用

异步模式（默认）：请求返回 jobId，你可以轮询 GET /api/v1/screenshots/{jobId} 直到 status=completed、failed 或 expired。

同步模式：请求会阻塞直到截图完成（或超时），直接返回截图 URL。如果超时，API 返回 status=processing，可继续使用 GET 接口轮询。

常见问题

Q1：如何截取受保护页面？
使用 headers 或 cookies 参数传递身份验证信息。
Q2：全页截图能否使用同步模式？
不支持，全页截图必须使用异步模式。
Q3：异步模式如何获取最终截图？
轮询 GET /api/v1/screenshots/{jobId} 直到 status=completed。

简介