Image Tiler MCP Server

图像平铺mcp服务器

](https://www.npmjs.com/package/image-tiler-mcp-server)  ](https://nodejs.org/en)

MCP服务器，通过平铺大图像并在细节因自动缩小而丢失之前捕获完整网页，为LLM提供全分辨率视觉。

The server generates an interactive HTML preview for every image, showing per-model tile grids and token estimates

你能做什么

• 网页的视觉质量保证。 捕获一个URL，平铺它，让LLM以全分辨率发现未对齐的元素、错误的颜色和损坏的布局。修复代码，重新捕获，并直观地验证修复。

• 移动响应测试。 使用移动模拟、视网膜缩放和真实的移动用户代理在任何视口宽度进行捕获。LLM逐块审查完整的移动布局，捕捉只出现在小屏幕上的响应断点问题。

• 全分辨率图像分析。 当LLM缩小图表、信息图表和设计模型时，它们会丢失关键细节。克劳德将3600 x 20220px的整页截图压缩到279 x 1568，变成76个可分析的图块，每个图块都是原生分辨率。

• 令牌高效瓷砖检查。 每个图块都得到基于熵的内容分类：空白、低细节、混合或高细节。LLM完全跳过空白磁贴，将令牌集中在重要的事情上。

• 迭代式可视化工作流程。 捕获、分析、修复、重新捕获。版本化输出目录(_v1, _v2, ...）保留每次迭代，这样您就可以在不覆盖之前结果的情况下比较之前和之后的结果。

快速开始

克劳德代码

claude mcp add image-tiler -- npx -y image-tiler-mcp-server

image-tiler 是本地别名。你可以随心所欲地命名它。 image-tiler-mcp-server 是下载并运行的npm包。

看 克劳德代码MCP文档 了解更多信息。

Codex CLI

codex mcp add image-tiler -- npx -y image-tiler-mcp-server

或添加到 ~/.codex/config.toml:

[mcp_servers.image-tiler]
command = "npx"
args = ["-y", "image-tiler-mcp-server"]

VS Code (Cline / Continue)

添加到您的VS Code MCP设置中：

{
  "image-tiler": {
    "command": "npx",
    "args": ["-y", "image-tiler-mcp-server"]
  }
}

Cursor

添加 ~/.cursor/mcp.json:

{
  "mcpServers": {
    "image-tiler": {
      "command": "npx",
      "args": ["-y", "image-tiler-mcp-server"]
    }
  }
}

Claude Desktop

添加到您的Claude Desktop配置文件中：

• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
• 窗户： %APPDATA%\Claude\claude_desktop_config.json
• Linux： ~/.config/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "image-tiler": {
      "command": "npx",
      "args": ["-y", "image-tiler-mcp-server"]
    }
  }
}

编辑后重新启动Claude Desktop。

Global Install (faster startup)

npm install -g image-tiler-mcp-server

然后在任何客户端中使用更简单的配置：

{
  "command": "image-tiler-mcp-server"
}

From Source

git clone https://github.com/keiver/image-tiler-mcp-server.git
cd image-tiler-mcp-server
npm install
npm run build

然后将MCP配置指向构建文件：

{
  "command": "node",
  "args": ["/absolute/path/to/image-tiler-mcp-server/dist/index.js"]
}

Docker

塑造形象：

git clone https://github.com/keiver/image-tiler-mcp-server.git
cd image-tiler-mcp-server
docker build -t image-tiler-mcp-server .

该图像包括用于URL捕获的Chromium。Chrome浏览器 --no-sandbox 默认情况下，镜像中的标志是启用的，因为Docker容器不提供Chrome沙盒所需的用户命名空间。容器本身提供进程隔离。重新启用沙盒（例如 --privileged 或用户命名空间支持），传递 -e CHROME_NO_SANDBOX=0.

{
  "command": "docker",
  "args": [
    "run", "--rm", "-i",
    "-v", "/path/to/your/images:/data",
    "-e", "TILER_ALLOWED_DIRS=/data",
    "image-tiler-mcp-server"
  ]
}

这 -i 标志是必需的（stdio传输）。为服务器需要读取或写入的任何目录装载一个卷，并设置 TILER_ALLOWED_DIRS 以限制对这些挂载的文件访问。

要完全禁用URL捕获（无Chrome，无网络访问）：

{
  "command": "docker",
  "args": [
    "run", "--rm", "-i",
    "-e", "TILER_DISABLE_URL_CAPTURE=1",
    "-v", "/path/to/your/images:/data",
    "-e", "TILER_ALLOWED_DIRS=/data",
    "image-tiler-mcp-server"
  ]
}

用法

平铺图像

tile~/source.png和分析内容

服务器读取图像尺寸并生成交互式HTML预览，其中每个模型的选项卡显示网格覆盖、图块计数和令牌估计。选择与您的用例匹配的模型，然后服务器平铺并返回批次进行分析。

捕获网页

捕获的完整页面截图https://tomotv.app

服务器启动无头Chrome浏览器，滚动页面以触发延迟加载的图像(loading="lazy")，然后捕获整页屏幕截图（滚动拼接16384px以上的页面）。您的助手以全分辨率接收每个部分，并可以识别布局问题、未对齐的元素或缩小后隐藏的损坏样式。

要只获取屏幕截图而不进行平铺，只需要求提供屏幕截图，并在比较步骤后停止。

测试移动布局

捕捉https://tomotv.app在移动视图中

这是响应式QA，而不仅仅是一个不同的视口。服务器通过以下方式进行捕获 mobile: true，它设置了一个390px视口、2x视网膜比例和一个移动Safari用户代理。检查移动UA或触摸功能的网站为其移动布局提供服务，因此LLM会准确审查真实手机用户看到的内容。

自定义瓷砖

预设

OpenAI注释： 这 openai config的目标是GPT-4o/o系列视觉管道（512px瓷砖补丁）。GPT-4.1使用了一个根本不同的管道（32x32像素补丁），目前不受支持。这将需要一个具有不同计算方法的单独模型配置。

双子座3注： Gemini 3为每张图片使用固定的代币预算（1120个代币，无论尺寸大小）。平铺增加了总令牌成本，但保留了细节。对于细节不重要的情况，可以考虑发送一张图片。

为什么是瓷砖？

你截图一整页，粘贴到克劳德，克劳德 把它压成缩略图任何长边超过1568像素的图像都会自动缩小到约1.15百万像素以内。3600 x 20220px的全页截图变成了279 x 1568，在模型看到之前就损失了99%以上的像素。

GPT-4o更宽容，但仍然具有破坏性：它将图像缩放到2048px以内，然后将最短边缩小到768px， *然后* 瓷砖内部。在GPT-4o开始自己的拼接之前，一张8192倍宽的NASA全景图变成了1456 x 768。

Gemini 1.5/2.0以768px平铺的方式原生处理大图像，无需缩小。然而，Gemini 3将每张图片的大小限制在固定的代币预算（1120个代币）内。Tiling为每件作品提供了自己的预算。

每个图块都位于模型的最佳位置内，因此LLM以全分辨率对其进行处理。

没有瓷砖会发生什么

使用 assets/portrait.png （3600 x 20220，国家地理杂志的整版截图）作为示例：

Gemini 1.5/2.0以768px的分辨率原生平铺大图像，无需缩小。 对于Gemini 3，平铺通过将每个平铺作为单独的图像发送来增加总令牌预算。

使用瓷砖

使用 assets/landscape.png （8192 x 4320，美国国家航空航天局图片库）：

*根据截至2026年2月发布的模型视觉文档： 克劳德视力极限 · OpenAI愿景指南 · 双子座形象理解 · Gemini媒体分辨率*

运作原理

此MCP服务器：

1. 读取图像尺寸和目标模型的视觉配置
2. 生成交互式HTML预览，每个模型选项卡显示网格覆盖、图块编号和令牌估计
3. 计算一个最优网格，使每个图块都保持在模型的最佳点内
4. 将图块提取为单个图像（WebP默认，PNG可选）并将其保存到磁盘
5. 返回元数据摘要（网格布局、文件路径、令牌成本、每个图块内容提示）
6. 按需供应瓷砖：致电 tilesDir + start/end 检索最多5个图块的批次

Web捕获管道。 对于URL，服务器启动无头Chrome，通过滚动页面触发延迟加载的图像，捕获整页截图（滚动拼接16384px以上的页面），然后将截图馈送到相同的平铺管道中。

自动缩小。 最长边超过10000px的图像在平铺之前会自动缩小（可通过以下方式配置 maxDimension).这使图块计数合理，并通过增加每个图块的内容密度来提高LLM理解。集 maxDimension=0 以禁用或传递自定义值（例如。， maxDimension=5000)为了更积极地缩小规模。

Tool Reference

tiler

一个处理所有图像拼接操作的统一工具。模式会根据您提供的参数自动检测：

• tilesDir 目前→ 瓷砖检索模式 （只读分页）
• url 或 screenshotPath 目前→ URL捕获模式 （截图+互动程序）
• filePath, sourceUrl, dataUrl，或 imageBase64 目前→ 平铺图像模式

模式优先级： 当存在多个模式参数时，该工具会按优先级进行解析： tilesDir > url/screenshotPath > filePath/sourceUrl/dataUrl/imageBase64. 避免在同一个调用中传递来自不同模式的参数。

工作流程：

该工具使用两步过程，让您在平铺之前选择正确的模型：

1. 比较 -仅使用图像源进行调用。返回一个比较表，显示每个支持模型的磁贴计数和令牌估计值，以及交互式HTML预览。
2. 瓷砖 -与所选人员再次通话 preset + outputDir 从步骤1开始，加上：

- 图像来源： 重新包含原始源参数(filePath, sourceUrl等等） - 捕获： 使用 screenshotPath 从步骤1（不是原始步骤 url)

跳过比较步骤： 提供 preset 和 outputDir 第一次打电话时立即打电话。

交互式模型选择器： 支持MCP启发的客户端会得到一个下拉选择器，而不是比较表。

参数-图像源（平铺图像模式）

\*平铺图像模式需要至少一个图像源。

参数-URL捕获（捕获模式）

支持对高于16384px的页面进行滚动缝合。自动触发延迟加载的图像(loading="lazy")在通过滚动页面进行捕获之前。没有懒惰图像的页面不受影响。

参数-磁贴检索（分页模式）

参数-平铺配置（跨模式共享）

MCP Prompts and Resources

提示

为支持的客户提供指导性工作流程 MCP提示:

资源

支持的客户端的静态引用 MCP资源:

行为

• 来源冲突： 多个图像源参数→ 最高优先级源与警告一起使用(filePath > sourceUrl > dataUrl > imageBase64).
• 重新进入： 如果 outputDir 已经有了比较步骤的预览，服务器直接跳到平铺。
• 取消奖励： 取消模型选择器将返回 "Tiling cancelled by user." 没有瓷砖。
• 版本化输出： 重复平铺同一来源会创建 _v1, _v2, ..., _vN 目录，以避免覆盖。
• 瓷砖命名： tile_ROW_COL.{format} 具有零填充的3位数索引（例如。， tile_000_003.webp)，一行一行，从左到右。

支持格式

PNG、JPEG、WebP、TIFF、GIF

故障排除

“找不到命令” -请确保已安装Node.js 20+： node --version

“找不到文件” -使用绝对路径。从MCP服务器的工作目录解析相对路径。

“MCP工具不可用” -配置更改后重新启动MCP客户端。在Claude Code中，运行 /mcp 检查服务器状态。

“未找到Chrome” -安装谷歌Chrome浏览器或设置 CHROME_PATH Chrome可执行文件的环境变量（必须是绝对路径）。

以root身份运行 -以root身份运行时，Chrome的沙盒会自动禁用。对于非根容器（例如Docker），设置 CHROME_NO_SANDBOX=1官方Docker镜像已经设置了这个。

安全

运输： 仅限stdio。服务器是由MCP客户端生成的单会话本地进程。它从不监听网络套接字。

URL下载保护（始终打开）

https: sourceUrl 下载使用 request-filtering-agent，在发出请求之前阻止对私有IP范围的请求：

• RFC 1918（10.x，172.16-31.x，192.168.x）
• 环回（127.x，：：1）
• 链接本地/IMDS（169.254.x，fe80:：/10），包括IPv4映射的IPv6(::ffff:169.254.169.254)
• Cgnat（100.64.X），ula（FC 00:/7）

HTTP重定向最多可跟踪5个跃点。每一跳都重新应用SSRF滤波 https: URL，因此即使初始URL是公共的，重定向到私有IP也会被阻止。 https: 到 http: 降级被阻止。 http: 下载绕过SSRF过滤，适用于本地开发服务器（localhost、LAN IP）。使用 https: 对于所有远程/生产URL。

限制： DNS重新绑定在应用层得到了缓解，但并没有完全阻止。

路径控制（通过选择加入 TILER_ALLOWED_DIRS)

集 TILER_ALLOWED_DIRS 以逗号分隔的绝对路径列表，将所有文件I/O限制到这些目录：

TILER_ALLOWED_DIRS=/app/uploads,/tmp/tiler-work

设置时：

• filePath 和 tilesDir 通过以下方式检查输入 fs.realpath() （解析符号链接）。
• outputDir 根据最近的现有祖先检查写入，以防止通过不存在的目录进行路径遍历。
• 允许列表之外的任何路径都会被拒绝 [TILER_ALLOWED_DIRS] 错误。

未设置时，不应用路径限制（保留向后兼容的本地行为）。

Chrome URL捕获终止开关

Chrome headless可以访问主机可以访问的任何网络地址。应用程序级IP检查无法可靠地约束它。对于没有 NetworkPolicy 或等效的，完全禁用URL捕获：

TILER_DISABLE_URL_CAPTURE=1

任何与 url 参数将返回错误，而不是生成Chrome。

Docker示例：

# CHROME_NO_SANDBOX=1 is set by default in the Docker image
TILER_ALLOWED_DIRS=/app/uploads
TILER_DISABLE_URL_CAPTURE=1   # remove only if Chrome is network-isolated

需求

• Node.js 20+
• 兼容的MCP客户端（克劳德代码、Codex CLI、VS代码、游标、克劳德桌面）

贡献

看 贡献.md 了解如何报告错误、建议更改和提交PR。

致谢

在…的帮助下建造 克劳德代码 作为代码起草、测试和文档的人工智能助手。

许可证

麻省理工学院

链接

• 报告问题