星战科技xingzhan.cloud
返回市场
截图网站快速版

截图网站快速版

作者：just-every90 星标更新：2025-07-21
安装使用来源：spider==github.com

项目介绍

@just-every/mcp-screenshot-website-fast

快速、高效的网页截图工具——针对CLI编码工具进行了优化。自动将整个页面分割成1072x1072像素的块以进行最佳处理。

<a href="https://glama.ai/mcp/servers/@just-every/mcp-screenshot-website-fast"> <img width="380" height="200" src="https://gips3.baidu.com/it/u=1493608589,2182276370&fm=3081&app=3081&f=PNG?w=760&h=400" alt="快速网页截图MCP服务器" /> </a>

npm 版本 GitHub Actions

概述

此工具专门用于AI视觉工作流程，能够捕获高质量的屏幕截图，并通过自动分辨率限制和分块来优化Claude Vision API和其他AI模型的处理。它确保屏幕截图尺寸为1072x1072像素（1.15兆像素），以实现最大兼容性。

功能

  • 📸 快速截图 使用无头浏览器Puppeteer
  • 🎯 Claude Vision优化 自动分辨率限制（1072x1072为最优1.15兆像素）
  • 🔲 自动分块 整个页面自动分割成1072x1072的块
  • 🎬 录屏捕捉 配置时间间隔记录一系列截图
  • 🔄 始终新鲜内容 不缓存确保获取最新截图
  • 📱 可配置视口 用于响应式测试
  • ⏱️ 等待策略 对动态内容（网络空闲、自定义延迟）
  • 📄 默认全页捕捉 默认情况下捕捉整个页面的截图
  • 🎥 动画WebP导出 将录屏保存为高质量的动画WebP文件
  • 💉 JavaScript注入 在录屏捕捉前执行自定义JS
  • 📦 最小依赖 快速npm安装
  • 🔌 MCP集成 无缝AI工作流
  • 🔋 资源高效 浏览器在60秒不活动后自动清理
  • 🧹 内存管理 每次截图后关闭页面以防止泄漏

安装

Claude Code

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

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

JetBrains IDEs

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

选择“作为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中（例如.vscode/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（可选）：等待事件：load, domcontentloaded, networkidle0, networkidle2（默认：domcontentloaded）
      • 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', 'networkidle2'
  • 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参数时：

  • 创建一个每秒间隔的动画WebP
  • 单独的帧也保存为PNG文件
  • 默认情况下动画无限循环
  • WebP提供卓越的质量：
    • 完整的颜色支持（没有256色限制）
    • 网络动画的高效压缩
    • 适合渐变背景和平滑动画
    • 相比GIF具有更好的质量且文件更小

开发使用

安装

npm install
npm run build

捕捉截图

# 完整页面与自动分块（默认）
npm run dev capture https://example.com -o screenshot.png

# 视口截图
npm run dev capture https://example.com --no-full-page -o screenshot.png

# 等待特定条件
npm run dev capture https://example.com --wait-until networkidle0 --wait-for 2000 -o screenshot.png

CLI选项

  • -w, --width <pixels> - 视口宽度（最大1072，默认：1072）
  • -h, --height <pixels> - 视口高度（最大1072，默认：1072）
  • --no-full-page - 禁用完整页面捕捉和分块
  • --wait-until <event> - 等待事件：load, domcontentloaded, networkidle0, networkidle2
  • --wait-for <ms> - 额外等待时间（毫秒）
  • -o, --output <path> - 输出文件路径（对于分块输出是必需的）

自动重启功能

MCP服务器默认包含自动重启功能以提高可靠性：

  • 如果服务器崩溃，自动重启
  • 处理未处理的异常和拒绝的承诺
  • 实现指数退避（最多1分钟内10次尝试）
  • 记录所有重启尝试以供监控
  • 平稳地处理关闭信号（SIGINT, SIGTERM）

无需自动重启的开发/调试：

# 直接运行而不使用重启包装器
npm run serve:dev

架构

mcp-screenshot-website-fast/
├── src/
│   ├── internal/       # 核心截图捕捉逻辑
│   ├── utils/          # 日志记录和实用工具
│   ├── index.ts        # CLI入口点
│   ├── serve.ts        # MCP服务器入口点
│   └── serve-restart.ts # 自动重启包装器

开发

# 在开发模式下运行
npm run dev capture https://example.com -o screenshot.png

# 为生产构建
npm run build

# 运行测试
npm test

# 类型检查
npm run typecheck

# 代码检查
npm run lint

为什么使用这个工具？

专门为AI视觉工作流程设计：

  1. 优化Claude Vision API - 自动分辨率限制至1072x1072像素（1.15兆像素）
  2. 自动分块 - 整个页面分割成完美的块以供AI处理
  3. 始终新鲜 - 不缓存确保获取最新内容
  4. MCP原生 - 与AI开发工具的一级集成
  5. 简单API - 清晰、简洁的界面用于捕捉截图

贡献

欢迎贡献！请：

  1. 分叉仓库
  2. 创建功能分支
  3. 为新功能添加测试
  4. 提交拉取请求

故障排除

Puppeteer问题

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

截图质量

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

超时错误

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

许可证

MIT