mcpField
I
imgpage

imgpage

本地服务
github.com/CloudCorpRecords媒体与设计02 天前更新

关于 imgpage

imgpage 是连接托管 html2img 服务的本地桥接程序,可将 HTML 转为图片或 PDF,也可截取网页。适用于需要从标记内容或实时网址生成渲染结果的客户端。

主要功能

  1. 01将 HTML 和 CSS 渲染为 PNG
  2. 02生成 A4 矢量 PDF
  3. 03按网址截取实时网页
  4. 04截取整页或指定元素
  5. 05返回可分享的 CDN 链接

适用场景

  1. 01将 HTML 文档预览为图片
  2. 02从标记内容生成可选中文本的 PDF
  3. 03截取实时网页或指定元素
  4. 04通过 CDN 链接分享渲染结果

MCP 相关

向 MCP 客户端提供 HTML 渲染和网址截图两种上游工具,将调用转发至 html2img,并原样返回结果。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"cloudcorprecords-imgpage": {
"command": "npx",
"args": [
"-y",
"@reneturcios/imgpage"
]
}
}
}
启动命令npx -y @reneturcios/imgpage

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npm@reneturcios/imgpage0.1.0
ocighcr.io/cloudcorprecords/imgpage:0.1.0

工具

2

收录的工具列表 · 更新于 2 天前

参数类型必填说明
cssstring否要注入页面的可选附加 CSS。
dpiinteger否用于提高输出分辨率的缩放系数/设备像素比(1-4)。
htmlstring是要渲染的完整 HTML 标记。请在内联 <style> 块中包含 CSS。可使用可公开访问的远程图像 URL;对于未托管在任何位置的图像,请使用 base64 data URI。
widthinteger否视口宽度,单位为像素(1-5000)。默认值为 1920。
formatenum否输出格式。"png"(默认)返回按宽度和高度设定尺寸的图像。"pdf" 返回 A4 纵向矢量 PDF,文本可选择、可搜索,并自动分页;此时忽略 width、height、dpi 和 fullpage。发票、报告、证书和票据等文档请使用 "pdf"。社交卡片、OG 图像及任何固定像素尺寸的内容请使用 "png"。png | pdf
heightinteger否视口高度,单位为像素(1-5000)。默认值为 1080。
fullpageboolean否截取整个可滚动页面,而非仅截取视口。
ms_delayinteger否截取前等待的毫秒数(1-5000),例如等待字体或动画稳定。
wait_for_selectorstring否等待此 CSS 选择器出现后再截取。

详细介绍

imgpage

imgpage 是一个小型本地桥接程序,用于连接托管的 html2img MCP 服务。该服务可将标记语言和网页转换为 渲染结果。提供完整、独立的 HTML 文档(样式需写在内联 style 块中), 即可获得按你选择的视口尺寸生成的 PNG 图片; 若请求 pdf 格式,则会返回可选择文本的 A4 矢量 PDF。 也可以提供在线页面的 地址,对该页面进行截图, 可截取整页或单个元素,结果同样为 PNG 或 PDF。每次渲染还会返回一个可分享的 CDN URL;PDF 渲染仅返回 URL。

此软件包本身不会进行渲染。它会在本地返回工具列表,内容与从在线 端点捕获的信息完全一致,并将每次工具调用转发到上游, 原样返回响应。共有两个工具;根据捕获的说明, 每次调用都会消耗你自己的 html2img 套餐中的一个点数。 此软件包无法购买点数、启动结账、为账户充值或生成密钥:它只会通过以下两个渲染调用, 消耗你已有套餐中的点数。

工具

  • generate-image-from-html — 将 HTML 和 CSS 渲染为 PNG 图片,或在格式为 pdf 时渲染为 A4 矢量 PDF。必填:html(完整标记; CSS 需包含在内联 style 块中;可公开访问的远程图片 URL 可用,而未托管在任何地方的图片 应嵌入为 base64 data URI)。可选:css、width(1-5000, 默认值为 1920)、height(1-5000, 默认值为 1080)、fullpage、dpi(1-4)、ms_delay(1-5000)、 wait_for_selector 和 format(png 或 pdf; 使用 pdf 时,width、height、dpi 和 fullpage 将被忽略)。返回渲染后的图片以及一个 可分享的 CDN URL;PDF 渲染仅返回 URL。 每次调用消耗一个点数。
  • screenshot-url — 根据 URL 将在线网页 截取为 PNG 图片,或在格式为 pdf 时截取为 A4 矢量 PDF。必填:url(页面的完整 URL)。 可选:css、width(1-5000,默认值为 1920)、height(1-5000,默认值为 1080)、 fullpage、selector(仅截取匹配的元素)、dpi(1-4)、ms_delay(1-5000)、 wait_for_selector 和 format(png 或 pdf; 使用 pdf 时,width、height、dpi、fullpage 和 selector 将被忽略)。返回渲染后的图片以及一个可分享的 CDN URL;PDF 渲染仅返回 URL。每次调用消耗一个点数。

配置

  • HTML2IMG_MCP_URL(可选)— 覆盖 上游端点。默认值为 https://app.html2img.com/mcp。(此覆盖接口 是本次重建中自行标注的还原内容。)
  • HTML2IMG_API_KEY(可选)— 设置后,每个 上游请求都会携带 Authorization: Bearer <key> 标头,使用调用者自己的 html2img API 密钥。未设置时, 不会发送密钥标头。(标头名称和 Bearer 格式由原始版本的注册表记录确定;该记录声明了必需的 Authorization 密钥标头,但未指定软件包环境变量名称,因此通过此环境变量转发密钥属于明确标注的 还原内容——原始接口是在不带密钥的情况下捕获的。)
转发机制

首次调用工具时,客户端会在上游建立一个可流式传输的 HTTP 会话:发送 JSON-RPC initialize 请求(protocolVersion 2025-03-26,clientInfo 名称为 imgpage),随后发送 notifications/initialized 通知,再发送携带调用者参数且未经更改的 tools/call 请求。上游通过 initialize 响应 返回 Mcp-Session-Id 标头时,该值会附加到 此会话后续的每个请求中;该会话会在进程运行期间重复使用。 响应可能以普通 JSON 或服务器发送事件的形式到达;两种形式均会读取。

上游成功结果会原样传递,包括上游设置的任何 isError 标志。 失败情况——JSON-RPC 错误、非 2xx 状态、无法读取响应,或无法完成的请求—— 会作为 isError 结果返回,其文本以 imgpage error: 开头(此错误呈现方式 是本次重建中自行标注的还原内容)。

命令行

每个工具也是一个子命令,接受一个 JSON 参数字符串:

npx @reneturcios/imgpage generate-image-from-html '{"html":"<h1>Hello</h1>"}'
npx @reneturcios/imgpage screenshot-url '{"url":"https://example.com"}'
npx @reneturcios/imgpage --version

退出代码:成功时为 0,返回 isError 结果时为 1,用法错误时为 2。

MCP 服务

npx -y @reneturcios/imgpage mcp

MCP 客户端配置:

{
  "mcpServers": {
    "imgpage": {
      "command": "npx",
      "args": ["-y", "@reneturcios/imgpage", "mcp"]
    }
  }
}

Docker

docker run -i ghcr.io/cloudcorprecords/imgpage
docker run --rm ghcr.io/cloudcorprecords/imgpage --version

容器的默认命令是 mcp,因此第一种形式是 stdio MCP 服务;任何其他参数都会正常传递给命令行。

开发

npm install
npm run build
npm test
npm run dev

测试套件完全针对存根化的 JSON-RPC 上游运行,不会进行实时网络调用。

许可证

MIT — 参见 LICENSE。

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。