mcpField
I
Image Tools Mcp

Image Tools Mcp

本地服务
github.com/kshern媒体与设计970 周前更新

关于 Image Tools Mcp

Image Tools MCP 是用于检查图片尺寸并压缩 URL 或本地文件图片的 MCP 服务。它还可转换输出格式,并能从 Figma 获取图片链接后进行压缩。

主要功能

  1. 01读取 URL 图片尺寸
  2. 02读取本地文件尺寸
  3. 03使用 TinyPNG 压缩远程图片
  4. 04使用 TinyPNG 压缩本地图片
  5. 05转换为 WebP、JPEG 或 PNG
  6. 06获取并压缩 Figma 图片

适用场景

  1. 01检查远程图片素材尺寸
  2. 02压缩待交付的本地图片
  3. 03处理来自 Figma 的图片链接

MCP 相关

它向 MCP 客户端提供图片尺寸读取、URL 或本地图片压缩,以及获取并压缩 Figma 图片链接的工具。压缩和 Figma 工具分别需要对应的 API 密钥。

配置

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

mcp.json · 通用配置
{
"mcpServers": {
"image-tools": {
"command": "npx",
"args": [
"-y",
"image-tools-mcp"
],
"env": {
"TINIFY_API_KEY": "<TINIFY_API_KEY>",
"FIGMA_API_TOKEN": "<FIGMA_API_TOKEN>"
}
}
}
}
启动命令npx -y image-tools-mcp
需要配置的环境变量
TINIFY_API_KEY密钥
FIGMA_API_TOKEN密钥

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

安装包
npmimage-tools-mcp

工具

2

收录的工具列表 · 更新于 3 周前

参数类型必填说明
optionsobject是获取图片尺寸的选项
options.imageUrlstring是要获取的图片 URL

详细介绍

Image Tools MCP

smithery badge

用于获取图像尺寸和压缩图像的模型上下文协议(MCP)服务,支持 URL 和本地文件来源。

中文文档

功能

  • 获取 URL 图像的尺寸
  • 获取本地图像文件的尺寸
  • 使用 TinyPNG API 压缩 URL 图像
  • 使用 TinyPNG API 压缩本地图像
  • 将图像转换为不同格式(webp、jpeg/jpg、png)
  • 返回宽度、高度、类型、MIME 类型和压缩信息
示例结果

示例结果 1 示例结果 2

示例结果 1 示例结果 2

从 Figma URL 下载并压缩 示例结果 3

用法

用作 MCP 服务

此服务提供五个工具函数:

  1. get_image_size - 获取远程图像的尺寸
  2. get_local_image_size - 获取本地图像的尺寸
  3. compress_image_from_url - 使用 TinyPNG API 压缩远程图像
  4. compress_local_image - 使用 TinyPNG API 压缩本地图像
  5. figma - 从 Figma API 获取图像链接,并使用 TinyPNG API 压缩图像
客户端集成

要使用此 MCP 服务,你需要通过 MCP 客户端连接到它。以下是与不同客户端集成的示例:

用法
{
  "mcpServers": {
    "image-tools": {
      "command": "npx",
      "args": ["image-tools-mcp"],
      "env": {
        "TINIFY_API_KEY": "<YOUR_TINIFY_API_KEY>",
        "FIGMA_API_TOKEN": "<YOUR_FIGMA_API_TOKEN>"
      }
    }
  }
}
与 MCP 客户端库搭配使用
import { McpClient } from "@modelcontextprotocol/client";

// Initialize the client
const client = new McpClient({
  transport: "stdio" // or other transport options
});

// Connect to the server
await client.connect();

// Get image dimensions from URL
const urlResult = await client.callTool("get_image_size", {
  options: {
    imageUrl: "https://example.com/image.jpg"
  }
});
console.log(JSON.parse(urlResult.content[0].text));
// Output: { width: 800, height: 600, type: "jpg", mime: "image/jpeg" }

// Get image dimensions from local file
const localResult = await client.callTool("get_local_image_size", {
  options: {
    imagePath: "D:/path/to/image.png"
  }
});
console.log(JSON.parse(localResult.content[0].text));
// Output: { width: 1024, height: 768, type: "png", mime: "image/png", path: "D:/path/to/image.png" }

// Compress image from URL
const compressUrlResult = await client.callTool("compress_image_from_url", {
  options: {
    imageUrl: "https://example.com/image.jpg",
    outputFormat: "webp" // Optional: convert to webp, jpeg/jpg, or png
  }
});
console.log(JSON.parse(compressUrlResult.content[0].text));
// Output: { originalSize: 102400, compressedSize: 51200, compressionRatio: "50.00%", tempFilePath: "/tmp/compressed_1615456789.webp", format: "webp" }

// Compress local image
const compressLocalResult = await client.callTool("compress_local_image", {
  options: {
    imagePath: "D:/path/to/image.png",
    outputPath: "D:/path/to/compressed.webp", // Optional
    outputFormat: "image/webp" // Optional: convert to image/webp, image/jpeg, or image/png
  }
});
console.log(JSON.parse(compressLocalResult.content[0].text));
// Output: { originalSize: 102400, compressedSize: 51200, compressionRatio: "50.00%", outputPath: "D:/path/to/compressed.webp", format: "webp" }

// Fetch image links from Figma API

const figmaResult = await client.callTool("figma", {
  options: {
    figmaUrl: "https://www.figma.com/file/XXXXXXX"
  }
});
console.log(JSON.parse(figmaResult.content[0].text));
// Output: { imageLinks: ["https://example.com/image1.jpg", "https://example.com/image2.jpg"] }

### Tool Schemas

#### get_image_size

```typescript
{
  options: {
    imageUrl: string // URL of the image to retrieve dimensions for
  }
}
get_local_image_size
{
  options: {
    imagePath: string; // Absolute path to the local image file
  }
}
compress_image_from_url
{
  options: {
    imageUrl: string // URL of the image to compress
    outputFormat?: "image/webp" | "image/jpeg" | "image/jpg" | "image/png" // Optional output format
  }
}
compress_local_image
{
  options: {
    imagePath: string // Absolute path to the local image file
    outputPath?: string // Optional absolute path for the compressed output image
    outputFormat?: "image/webp" | "image/jpeg" | "image/jpg" | "image/png" // Optional output format
  }
}
figma
{
  options: {
    figmaUrl: string; // URL of the Figma file to fetch image links from
  }
}

更新日志

  • 2025-05-12: 更新了 Figma API,以支持更多参数,包括 2x 图像缩放。

技术实现

此项目基于以下库构建:

环境变量

  • TINIFY_API_KEY - 图像压缩功能必需。从 TinyPNG 获取 API 密钥
    • 未提供时,将不会注册压缩工具(compress_image_from_url 和 compress_local_image)
  • FIGMA_API_TOKEN - 从 Figma API 获取图像链接所必需。从 Figma 获取 API 令牌
    • 未提供时,将不会注册 Figma 工具(figma)

注意:无论是否提供 API 密钥,基本图像尺寸工具(get_image_size 和 get_local_image_size)始终可用。

许可证

MIT

评论

支持 Markdown

第一次接触 MCP?

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

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