完整网页截图

使用 Puppeteer 捕获完整网页截图，包括随滚动动态加载的内容。

适用场景

✅ 在以下情况下使用该技能：

• “为这个网站截个图”
• “截取 example.com 的页面”
• “捕获整页内容”
• “获取该网页的可视化快照”
• “截个网页图”
• “给这个网站截屏”

不适用场景

❌ 请勿在以下情况下使用该技能：

• 截取本地文件 → 请使用系统级截图工具
• 仅需截取特定元素 → 请使用浏览器 DevTools
• 需要录制交互过程的视频或连续截图 → 请使用屏幕录制工具
• 目标页面需登录认证 → 需手动在浏览器中操作

初始化配置

首次运行（安装 Puppeteer）：

cd ~/.openclaw/skills/full-webpage-screenshot/scripts
npm install

命令

基础截图

cd ~/.openclaw/skills/full-webpage-screenshot/scripts
node screenshot.js "https://example.com" ~/workspace/screenshot.png

自定义视口（移动端/桌面端）

# 移动端视图
cd ~/.openclaw/skills/full-webpage-screenshot/scripts
VIEWPORT_WIDTH=375 VIEWPORT_HEIGHT=812 node screenshot.js "https://example.com" mobile.png

# 桌面端高清视图
VIEWPORT_WIDTH=1920 VIEWPORT_HEIGHT=1080 node screenshot.js "https://example.com" desktop.png

加载缓慢的页面

cd ~/.openclaw/skills/full-webpage-screenshot/scripts
WAIT_AFTER=5000 node screenshot.js "https://slow-site.com" screenshot.png

可选参数

输出结果

返回 JSON 格式响应：

{
  "success": true,
  "path": "/path/to/screenshot.png",
  "width": 1280,
  "height": 4352
}

快捷指令

“截图这个网站”

cd ~/.openclaw/skills/full-webpage-screenshot/scripts
node screenshot.js "$URL" ~/workspace/screenshot.png

“移动端截图”

cd ~/.openclaw/skills/full-webpage-screenshot/scripts
VIEWPORT_WIDTH=375 VIEWPORT_HEIGHT=812 node screenshot.js "$URL" mobile.png

注意事项

• 要求 Node.js 版本 ≥ 18
• 首次运行需在 scripts/ 目录下执行 npm install
• 自动执行滚动以触发懒加载内容渲染
• 支持所有现代 Web 特性（JavaScript、CSS、字体等）