AI导哈

HTML转图片服务器

一个基于Model Context Protocol (MCP)的服务器，使用Puppeteer将HTML内容或URL转换为图片，支持多种格式和自定义选项。

  • by myhighland
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 myhighland/mcp-html2image

使用说明

HTML 转图片 MCP 服务器

一个基于 Model Context Protocol (MCP) 的服务器，使用最新版本的 Puppeteer v24.33.0 将 HTML 内容或 URL 转换为图片，采用现代最佳实践和增强渲染能力。

功能特性

  • 将 HTML 字符串转换为图片 (PNG, JPEG, WebP)
  • 智能加载检测捕获 URL 截图
  • 可自定义视口尺寸，支持高 DPI 渲染 (2x deviceScaleFactor)
  • 使用 CSS 选择器精确捕获特定元素
  • 全页面或视口捕获选项
  • 可调节有损格式的图片质量
  • 透明 PNG 支持，可省略背景
  • 高级字体和图片加载优化
  • 冻结动画和过渡效果，确保捕获一致性
  • 基础认证支持
  • 浏览器上下文隔离，保护隐私
  • 增强的 iframe 处理
  • 捕获期间改进滚动条隐藏
  • 更好的资源超时管理

最新更新

  • 升级至 MCP SDK v1.25.1，采用最新 API 和类型安全改进
  • 更新至 Puppeteer v24.33.0 (最新稳定版本)
  • 优化浏览器启动参数，提升性能
  • 改进图片加载检测，采用基于事件的等待机制
  • 高级元素捕获，优化 scrollIntoView
  • 更好的错误处理，包含后备超时机制
  • 增强 CSS 注入，冻结动画效果
  • 改进跨域 iframe 处理
  • 更好的内存管理，确保适当清理
  • 添加高 DPI 渲染支持 (2x 缩放因子)
  • 现代化 TypeScript 代码库，严格类型检查

安装

npm install

构建

npm run build

使用方法

运行服务器

npm start

可用工具

capture-html-to-image

将 HTML 内容转换为图片，具有增强渲染功能。

参数:

  • html (必需): 要转换的 HTML 内容
  • outputPath (可选): 输出文件路径
  • format (可选): 图片格式 - "png", "jpeg", "webp" (默认: "png")
  • width (可选): 视口宽度 (默认: 1200)
  • height (可选): 视口高度 (默认: 800)
  • quality (可选): JPEG/WebP 的图片质量 (1-100, 默认: 90)
  • fullPage (可选): 捕获全页面 (默认: false)
  • selector (可选): CSS 选择器，用于捕获特定元素
  • omitBackground (可选): 省略背景以获得透明 PNG (默认: false)

capture-url-to-image

捕获 URL 作为图片，具有智能加载检测功能。

参数:

  • url (必需): 要捕获的 URL
  • outputPath (可选): 输出文件路径
  • format (可选): 图片格式 - "png", "jpeg", "webp" (默认: "png")
  • width (可选): 视口宽度 (默认: 1200)
  • height (可选): 视口高度 (默认: 800)
  • quality (可选): JPEG/WebP 的图片质量 (1-100, 默认: 90)
  • fullPage (可选): 捕获全页面 (默认: false)
  • selector (可选): CSS 选择器，用于捕获特定元素
  • omitBackground (可选): 省略背景以获得透明 PNG (默认: false)
  • waitUntil (可选): 导航完成条件 - "load", "domcontentloaded", "networkidle0", "networkidle2" (默认: "networkidle2")
  • timeout (可选): 导航超时时间，毫秒 (默认: 30000)

Claude Desktop 使用示例

添加到您的 claude_desktop_config.json：

{
  "mcpServers": {
    "html-to-image": {
      "command": "node",
      "args": ["xxxx/build/index.js"],
      "cwd": "xxxx"
    }
  }
}

开发

npm run dev

许可证

MIT

相关 MCP