Screenshot Website Fast

@只是每个/mcp截图网站快

快速、高效的网页截图捕获-针对CLI编码工具进行了优化。自动将整页平铺为1072x1072块，以实现最佳处理。

](https://www.npmjs.com/package/@just-every/mcp-screenshot-website-fast) ](https://github.com/just-every/mcp-screenshot-website-fast/actions)

概述

该工具专为人工智能视觉工作流程构建，通过Claude vision API和其他人工智能模型自动限制分辨率和平铺来捕捉高质量的屏幕截图，以实现最佳处理。它确保屏幕截图大小完美，为1072x1072像素（1.15百万像素），以实现最大兼容性。

特性

• 📸 快速截图 使用Puppeteer无头浏览器
• 🎯 克劳德视觉优化 具有自动分辨率限制（1072x1072，可获得最佳的115万像素）
• 🔲 自动平铺 -整页自动拆分为1072x1072个图块
• 🎬 屏幕截图 -随着时间的推移，以可配置的间隔记录一系列屏幕截图
• 🔄 内容总是新鲜的 -无缓存可确保最新的屏幕截图
• 📱 可配置视口 用于响应式测试
• ⏱️ 等待策略 用于动态内容（网络空闲、自定义延迟）
• 📄 完整页面捕获 默认情况下，完整页面截图
• 🎥 动画WebP导出 -将屏幕录像保存为高质量的动画WebP文件
• 💉 JavaScript注入 -在截屏之前执行自定义JS
• 📦 最小依赖性 快速安装npm
• 🔌 MCP集成 实现无缝的人工智能工作流程
• 🔋 资源效率的 -60秒不活动后自动清理浏览器
• 🧹 内存管理 -每次截图后页面都会关闭，以防止泄漏

安装

克劳德代码

claude mcp add screenshot-website-fast -s user -- npx -y @just-every/mcp-screenshot-website-fast

VS Code

code --add-mcp '{"name":"screenshot-website-fast","command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}'

光标

cursor://anysphere.cursor-deeplink/mcp/install?name=screenshot-website-fast&config=eyJzY3JlZW5zaG90LXdlYnNpdGUtZmFzdCI6eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBqdXN0LWV2ZXJ5L21jcC1zY3JlZW5zaG90LXdlYnNpdGUtZmFzdCJdfX0=

JetBrains集成开发环境

设置→ 工具→ AI助手→ 模型上下文协议（MCP）→ Add

选择“作为JSON”并粘贴：

{"command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}

原始JSON（适用于任何MCP客户端）

{
  "mcpServers": {
    "screenshot-website-fast": {
      "command": "npx",
      "args": ["-y", "@just-every/mcp-screenshot-website-fast"]
    }
  }
}

将其放入客户端的mcp.json中（例如.vcode/mcp.json、~/.cursor/mcp.json或Claude的.mcp.json）。

先决条件

• Node.js 20.x或更高版本
• npm或npx
• Chrome/Chromium（由Puppeteer自动下载）

快速开始

MCP服务器使用情况

在IDE中安装后，以下工具可用：

可用工具

• take_screenshot -捕获网页的高质量屏幕截图

- 参数： - url （必填）：要捕获的HTTP/HTTPS URL - width （可选）：视口宽度（像素）（最大1072，默认1072） - height （可选）：视口高度（像素）（最大1072，默认1072） - fullPage （可选）：使用平铺捕获整页屏幕截图（默认值：true） - waitUntil （可选）：等待事件：加载、加载域内容、networkidle0、networkidles2（默认值：加载域内容） - waitFor （可选）：额外等待时间（毫秒） - directory （可选）：保存屏幕截图的目录-返回文件路径而不是base64图像

使用示例

默认用法（返回base64图像）：

take_screenshot(url="https://example.com")

保存到目录（返回文件路径）：

take_screenshot(url="https://example.com", directory="/path/to/screenshots")

使用时 directory 参数：

• 屏幕截图保存为带有时间戳的PNG文件
• 返回文件路径而不是base64数据
• 对于平铺的屏幕截图，每个平铺都保存为单独的文件
• 如果目录不存在，则会自动创建

take_screencast

随着时间的推移，捕获一系列屏幕截图以创建屏幕截图。仅捕获视口的顶部图块（1072x1072）。

参数

• url （必填）：要捕获的URL
• duration （可选）：总持续时间（秒）（默认值：10）
• interval （可选）：屏幕截图之间的间隔（秒）（默认值：2）
• jsEvaluate （可选）：在开始时执行的JavaScript代码
• waitUntil （可选）：等待策略：“load”、“domcontentloaded”、“networkidle0”、“network idle2”
• waitForMS （可选）：启动前的额外等待时间
• directory （可选）：另存为动画WebP到目录（每秒捕获一次）

使用示例

基本屏幕截图（10秒内5帧）：

take_screencast(url="https://example.com")

自定义计时：

take_screencast(url="https://example.com", duration=15, interval=3)

执行JavaScript时：

take_screencast(
  url="https://example.com",
  jsEvaluate="document.body.style.backgroundColor = 'red';"
)

另存为动画WebP：

take_screencast(url="https://example.com", directory="/path/to/output")

使用时 directory 参数：

• 以1秒为间隔创建动画WebP
• 单个帧也保存为PNG文件
• 默认情况下，动画将永远循环
• WebP提供卓越的品质：

- 全彩色支持（无256色限制） - 高效压缩网络动画 - 非常适合渐变背景和平滑动画 - 与GIF相比，文件大小更小，质量更好

开发用途

安装

npm install
npm run build

屏幕捕获

# Full page with automatic tiling (default)
npm run dev capture https://example.com -o screenshot.png

# Viewport-only screenshot  
npm run dev capture https://example.com --no-full-page -o screenshot.png

# Wait for specific conditions
npm run dev capture https://example.com --wait-until networkidle0 --wait-for 2000 -o screenshot.png

CLI选项

• `-w, --width

` -视口宽度（最大1072，默认1072）

• `-h, --height

` -视口高度（最大1072，默认1072）

• --no-full-page -禁用整页捕获和平铺
• --wait-until -等待事件：加载、域内容加载、网络空闲0、网络空闲2
• --wait-for -额外等待时间（毫秒）
• `-o, --output

` -输出文件路径（平铺输出所需）

自动重启功能

默认情况下，MCP服务器包括自动重启功能，以提高可靠性：

• 如果服务器崩溃，则自动重新启动服务器
• 处理未处理的异常和promise拒绝
• 实现指数回退（1分钟内最多尝试10次）
• 记录所有重启尝试以进行监控
• 优雅地处理停机信号（信号情报、信号终端）

对于不自动重启的开发/调试：

# Run directly without restart wrapper
npm run serve:dev

建筑

mcp-screenshot-website-fast/
├── src/
│   ├── internal/       # Core screenshot capture logic
│   ├── utils/          # Logger and utilities
│   ├── index.ts        # CLI entry point
│   ├── serve.ts        # MCP server entry point
│   └── serve-restart.ts # Auto-restart wrapper

发展

# Run in development mode
npm run dev capture https://example.com -o screenshot.png

# Build for production
npm run build

# Run tests
npm test

# Type checking
npm run typecheck

# Linting
npm run lint

为什么是这个工具？

专为AI视觉工作流程构建：

1. 针对Claude Vision API进行优化 -自动分辨率限制为1072x1072像素（115万像素）
2. 自动平铺 -完整的页面被分割成完美的区块，以便进行人工智能处理
3. 总是新鲜 -无缓存可确保您获得最新内容
4. MCP本地 -与AI开发工具的一流集成
5. 简单API -用于捕获屏幕截图的简洁明了的界面

贡献

欢迎投稿！拜托：

1. 分叉存储库
2. 创建要素分支
3. 添加新功能的测试
4. 提交拉取请求

故障排除

木偶问题

• 确保Chrome/Chromium可以下载
• 检查防火墙设置
• 尝试设置 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true 并提供自定义可执行文件

屏幕截图质量

• 调整视口尺寸
• 使用适当的等待策略
• 检查网站是否需要身份验证

超时错误

• 增加等待时间 --wait-for 旗帜
• 使用不同 --wait-until 策略
• 检查网站是否可访问

许可证

麻省理工学院