Bildwerkzeuge MCP

👁 Schmiedeabzeichen

Ein Model Context Protocol (MCP)-Dienst zum Abrufen von Bildabmessungen und Komprimieren von Bildern, der sowohl URL- als auch lokale Dateiquellen unterstützt.

中文文档

Merkmale

• Abrufen der Bildabmessungen aus URLs

• Bildabmessungen aus lokalen Dateien abrufen

• Komprimieren Sie Bilder von URLs mithilfe der TinyPNG-API

• Komprimieren Sie lokale Bilder mit der TinyPNG-API

• Konvertieren Sie Bilder in verschiedene Formate (webp, jpeg/jpg, png)

• Gibt Informationen zu Breite, Höhe, Typ, MIME-Typ und Komprimierung zurück

Beispielergebnisse

👁 Beispielergebnis 1
👁 Beispielergebnis 2

von der Figma-URL herunterladen und komprimieren👁 Beispielergebnis 3

Related MCP server: File Converter MCP Server

Verwendung

Verwendung als MCP-Dienst

Dieser Dienst bietet fünf Toolfunktionen:

1. get_image_size - Abmessungen von Remote-Bildern abrufen

2. get_local_image_size - Abmessungen lokaler Bilder abrufen

3. compress_image_from_url – Komprimieren Sie Remote-Bilder mit der TinyPNG-API

4. compress_local_image – Komprimieren Sie lokale Bilder mit der TinyPNG-API

5. figma – Bildlinks von der Figma-API abrufen und mit der TinyPNG-API komprimieren

Client-Integration

Um diesen MCP-Dienst nutzen zu können, müssen Sie sich von einem MCP-Client aus damit verbinden. Hier sind Beispiele für die Integration mit verschiedenen Clients:

Verwendung mit Claude Desktop

1. Installieren Sie Claude Desktop von claude.ai/download

2. Holen Sie sich den TinyPNG-API-Schlüssel: Besuchen Sie TinyPNG und holen Sie sich Ihren API-Schlüssel

3. Konfigurieren Sie Claude Desktop für die Verwendung dieses MCP-Servers, indem Sie die Konfigurationsdatei bearbeiten:

{
 "mcpServers": {
 "image-tools": {
 "command": "npx",
 "args": ["image-tools-mcp"],
 "env": {
 "TINIFY_API_KEY": "<YOUR_TINIFY_API_KEY>",
 "FIGMA_API_TOKEN": "<YOUR_FIGMA_API_TOKEN>"
 }
 }
 }
}

3. Starten Sie Claude Desktop neu

4. Bitten Sie Claude, die Bildabmessungen zu ermitteln: „Können Sie mir die Abmessungen dieses Bildes nennen: https://example.com/image.jpg “

5. Bitten Sie Claude, ein Bild zu komprimieren: „Können Sie dieses Bild komprimieren: https://example.com/image.jpg “

6. Bitten Sie Claude, ein lokales Bild zu komprimieren: „Können Sie dieses Bild komprimieren: D:/Pfad/zu/Bild.png“

7. Bitten Sie Claude, einen lokalen Bildordner zu komprimieren: „Können Sie diesen Ordner komprimieren: D:/imageFolder“

8. Bitten Sie Claude, Bildlinks von der Figma-API abzurufen: „Können Sie Bildlinks von der Figma-API abrufen: https://www.figma.com/file/XXXXXXX “

Verwendung mit der MCP-Clientbibliothek

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
 }
}

Bild von URL komprimieren

{
 options: {
 imageUrl: string // URL of the image to compress
 outputFormat?: "image/webp" | "image/jpeg" | "image/jpg" | "image/png" // Optional output format
 }
}

komprimieren_lokales_Bild

{
 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
 }
}

Änderungsprotokoll

• 12.05.2025: Figma-API aktualisiert, um zusätzliche Parameter zu unterstützen, einschließlich 2-facher Bildskalierung.

Technische Umsetzung

Dieses Projekt basiert auf den folgenden Bibliotheken:

• probe-image-size - Zur Erkennung der Bildabmessungen

• tinify – Zur Bildkomprimierung über die TinyPNG-API

• figma-api – Zum Abrufen von Bildlinks von der Figma-API

Umgebungsvariablen

• TINIFY_API_KEY – Erforderlich für die Bildkomprimierung. Holen Sie sich Ihren API-Schlüssel von TinyPNG.

  • Wenn nicht angegeben, werden die Komprimierungstools ( compress_image_from_url und compress_local_image ) nicht registriert

• FIGMA_API_TOKEN – Erforderlich zum Abrufen von Bildlinks von der Figma-API. Holen Sie sich Ihr API-Token von Figma

  • Wenn nicht angegeben, wird das Figma-Tool ( figma ) nicht registriert

Hinweis: Die grundlegenden Bilddimensionstools ( get_image_size und get_local_image_size ) sind unabhängig von den API-Schlüsseln immer verfügbar.

Lizenz

MIT

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?
• Reddit Discussion
Related Servers

Tools

• get_image_sizeC
• get_local_image_sizeC