Bild zuschneiden

Schneiden Sie es genau auf den Rahmen zu, den Sie benötigen

Bild zuschneiden schneidet einen ausgewählten rechteckigen Bereich aus einem PNG-, JPEG- oder WebP-Bild aus, ohne es hochzuladen. Verwenden Sie es, um Kanten zu entfernen, ein Motiv zu zentrieren oder feste Karten-, Miniaturbild-, Avatar- und Social-Preview-Verhältnisse anzupassen.

Der Zuschneiderahmen verwendet Pixelkoordinaten: X und Y markieren die obere linke Ecke, während Breite und Höhe den ausgewählten Bereich definieren. Durch Zuschneiden ändern sich die Zusammensetzung und die Ausgabeabmessungen. Die ausgewählten Pixel werden in der gewählten Zuschnittgröße exportiert.

Die Verarbeitung erfolgt über den Browser-Canvas. Der freie Zuschnitt eignet sich am besten für beliebige Bildausschnitte, während die Voreinstellungen 1:1, 4:3 und 16:9 hilfreich sind, wenn das Ziel ein stabiles Seitenverhältnis erfordert. Überprüfen Sie die Ausgabe, da die Handhabung von Metadaten und Ausrichtung nach der Neucodierung unterschiedlich sein kann.

Wie zu verwenden

1. Laden Sie ein PNG-, JPEG- oder WebP-Bild hoch.
2. Ziehen Sie das Zuschneidefeld, ändern Sie seine Größe über die Ziehpunkte, wählen Sie eine Verhältnisvoreinstellung oder geben Sie genaue Zuschneidewerte ein.
3. Passen Sie die Qualität von JPEG/WebP an, zeigen Sie eine Vorschau der Ausgabe an und laden Sie dann das zugeschnittene Bild herunter.

Wann sollte man ein Bild zuschneiden?

Bild zuschneiden dient zum Ändern des Rahmens eines Bildes: Entfernen Sie leere Ränder, fokussieren Sie sich auf das wichtige Motiv oder passen Sie ein Bild in einen Slot mit festem Seitenverhältnis ein.

Verwenden Sie exakte X-, Y-, Breiten- und Höhenwerte, wenn eine Designspezifikation oder ein CMS einen präzisen Pixelzuschnitt verlangt. JPEG/WebP-Exporte können qualitätsangepasst werden, während PNG die sicherere Wahl ist, wenn die Transparenz erhalten bleiben muss.

Mit Canvas zuschneiden

Beim Zuschneiden der Leinwand werden Quellkoordinaten verwendet und nur das ausgewählte Rechteck in die Ausgabe-Leinwand gezeichnet:

const canvas = document.createElement('canvas');
canvas.width = crop.width;
canvas.height = crop.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(image, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
canvas.toBlob(saveBlob, outputMime, quality);

MCP-Integration

MCP (Model Context Protocol) ermöglicht KI-Agenten und Apps, Coding.Tools-Werkzeuge zu entdecken und für wiederholbare Konvertierungs-, Formatierungs-, Hashing- und Generierungsabläufe auszuführen.

MCP-Toolname: image-crop

MCP-Endpunkt: https://coding.tools/mcp

Rufen Sie zuerst tools/list auf. Jeder Tool-Eintrag enthält inputSchema, outputSchema und examples, damit ein KI-Agent oder Client gültige Argumente ohne Raten erstellen kann.

Bei tools/call lesen Sie result.content[0].text für den Anzeigewert und result.structuredContent für maschinelles Parsen. Tool-Fehler liefern isError: true; Protokollfehler liefern einen JSON-RPC-Fehler.

Beispiel für eine tools/call-Anfrage:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"image-crop","arguments":{}}}'

Dieses Bildtool ist in MCP nur im Browser nutzbar. tools/call verarbeitet keine lokalen Bildbytes auf dem Server, sondern gibt isError: true plus einen resource_link zur Weboberfläche zurück.

Die meisten Text- und Datentools akzeptieren eine input-Zeichenkette sowie optionale options. Bildtools, die Browser-Bild-APIs benötigen, werden zur Erkennung aufgelistet und geben bei Bedarf einen Link zur Weboberfläche zurück.