Back to Details

web-screenshot

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Screenshot

网页截图

Capture full-page or viewport screenshots of websites using headless Chrome/Chromium.
使用无头Chrome/Chromium捕获网站的整页或视口截图。

Quick Start

快速开始

bash
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/screenshot.png
bash
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/screenshot.png

Usage

使用方法

Basic Screenshot

基础截图

bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file>
bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file>

Full Page Screenshot

整页截图

bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file> --full
bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file> --full

With Custom Viewport

自定义视口

bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file> --width 1920 --height 1080
bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file> --width 1920 --height 1080

With Delay (for dynamic content)

设置延迟（针对动态内容）

bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file> --delay 3000
bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file> --delay 3000

Mobile Viewport

移动端视口

bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file> --mobile
bash
/job/.pi/skills/web-screenshot/screenshot.js "<url>" <output_file> --mobile

Options

参数选项

OptionDefaultDescription
--full
falseCapture full page (scroll height)
--width
1280Viewport width in pixels
--height
800Viewport height in pixels
--delay
0Wait time before capture (ms)
--mobile
falseUse mobile viewport (375x667)
--quality
80JPEG quality (1-100)
--format
pngOutput format: png, jpeg, webp
--wait-for
nullCSS selector to wait for
--dark-mode
falseEnable dark mode emulation
参数默认值说明
--full
false捕获整页（包含滚动高度）
--width
1280视口宽度（像素）
--height
800视口高度（像素）
--delay
0捕获前等待时间（毫秒）
--mobile
false使用移动端视口（375x667）
--quality
80JPEG质量（1-100）
--format
png输出格式：png、jpeg、webp
--wait-for
null等待指定CSS选择器对应的元素加载完成
--dark-mode
false启用深色模式模拟

Output Formats

输出格式

  • PNG: Lossless, larger files (default)
  • JPEG: Compressed, smaller files, configurable quality
  • WebP: Modern format, good compression
  • PNG：无损压缩，文件体积较大（默认格式）
  • JPEG：有损压缩，文件体积较小，质量可配置
  • WebP：现代格式，压缩效果优异

Examples

示例

bash
undefined
bash
undefined

Basic screenshot

基础截图

/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/example.png
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/example.png

Full page capture

整页捕获

/job/.pi/skills/web-screenshot/screenshot.js "https://example.com/page" /tmp/full.png --full
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com/page" /tmp/full.png --full

Desktop viewport

桌面端视口

/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/desktop.png --width 1920 --height 1080
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/desktop.png --width 1920 --height 1080

Mobile view

移动端视图

/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/mobile.png --mobile
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/mobile.png --mobile

Wait for dynamic content

等待动态内容加载

/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/delayed.png --delay 5000
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/delayed.png --delay 5000

Wait for specific element

等待指定元素加载

/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/wait.png --wait-for ".loaded-content"
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/wait.png --wait-for ".loaded-content"

High quality JPEG

高质量JPEG

/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/thumb.jpg --format jpeg --quality 90
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/thumb.jpg --format jpeg --quality 90

Dark mode capture

深色模式捕获

/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/dark.png --dark-mode
undefined
/job/.pi/skills/web-screenshot/screenshot.js "https://example.com" /tmp/dark.png --dark-mode
undefined

Use Cases

使用场景

  • Website thumbnail generation
  • Visual regression testing
  • Archiving web page appearances
  • Creating social media preview images
  • Monitoring website changes
  • Capturing error states or dynamic content
  • 网站缩略图生成
  • 视觉回归测试
  • 网页外观存档
  • 生成社交媒体预览图
  • 监控网站变化
  • 捕获错误状态或动态内容

When to Use

使用时机

  • User requests website screenshot
  • Need visual reference for web page
  • Creating thumbnails for link previews
  • Documenting website state at a point in time
  • Testing responsive layouts
  • 用户需要网站截图
  • 需要网页的视觉参考
  • 为链接预览生成缩略图
  • 记录某一时刻的网站状态
  • 测试响应式布局