Bildverarbeitung in Node.js: resize und crop mit Sharp

Arbeiten mit Bildern in Node.js: resize und crop mit Sharp

\n\n

In der modernen Webentwicklung ist die serverseitige Bildverarbeitung eine häufige Aufgabe. Node.js bietet mehrere leistungsstarke Bibliotheken für die Arbeit mit Grafiken. In diesem Artikel betrachten wir die Bibliothek Sharp im Detail – ein schnelles und effizientes Werkzeug zur Größenänderung (resize) und zum Zuschneiden (crop) von Bildern.

\n\n

Warum Sharp?

\n\n

Sharp verwendet die nativen libvips-Bibliotheken, was es zu einer der leistungsfähigsten Lösungen für Node.js macht. Die Hauptvorteile sind:

\n

\n
• Hohe Verarbeitungsgeschwindigkeit (deutlich schneller als reine JavaScript-Alternativen)
\n
• Geringer Speicherverbrauch
\n
• Unterstützung aller gängigen Formate: JPEG, PNG, WebP, AVIF, TIFF
\n
• Einfache und verständliche API
• Möglichkeit der Arbeit mit Streams

\n\n

Installation

\n\n

Die Installation von Sharp in einem Node.js-Projekt erfolgt mit einem Befehl:

\n\n

npm install sharp

\n\n

Nach der Installation ist die Bibliothek einsatzbereit. Stellen Sie sicher, dass die erforderlichen Abhängigkeiten für die Kompilierung des nativen Moduls auf Ihrem System installiert sind (dies geschieht normalerweise automatisch).

\n\n

Grundlegende Größenänderung (resize)

\n\n

Die Methode resize() ermöglicht die Änderung der Bildabmessungen. Betrachten wir die wichtigsten Verwendungsmöglichkeiten.

\n\n

Beispiel 1: Einfache Größenänderung

\n\n

const sharp = require('sharp');\nconst path = require('path');\n\nasync function resizeImage() {\n    try {\n        await sharp('input.jpg')\n            .resize(300, 200) // Breite 300px, Höhe 200px\n            .toFile('output.jpg');\n        console.log('Bild erfolgreich geändert');\n    } catch (error) {\n        console.error('Fehler:', error);\n    }\n}\n\nresizeImage();

\n\n

In diesem Beispiel wird das Bild auf die genauen Abmessungen 300x200 Pixel skaliert, was die Proportionen verzerren kann.

\n\n

Beispiel 2: Proportionen beibehalten

\n\n

async function resizeWithProportions() {\n    await sharp('input.jpg')\n        .resize({\n            width: 400, // nur Breite\n            height: undefined, // Höhe wird automatisch berechnet\n            fit: 'inside' // Proportionen beibehalten\n        })\n        .toFile('output_inside.jpg');\n    \n    console.log('Proportionen beibehalten');\n}

\n\n

Der Parameter fit akzeptiert mehrere Werte:

\n

\n
• cover – schneidet das Bild zu, um die angegebenen Abmessungen vollständig auszufüllen (Standard)
\n
• contain – passt das Bild in die angegebenen Abmessungen ein, unter Beibehaltung der Proportionen
\n
• fill – streckt das Bild auf die angegebenen Abmessungen
\n
• inside – verkleinert das Bild, sodass es in die angegebenen Abmessungen passt
\n
• outside – vergrößert das Bild, sodass es über die angegebenen Abmessungen hinausragt
\n

\n\n

Bilder zuschneiden (crop)

\n\n

Sharp bietet zwei Hauptmethoden zum Zuschneiden: mit der Methode extract() und über die Parameter von resize().

\n\n

Die Methode extract()

\n\n

Ermöglicht das Ausschneiden eines rechteckigen Bereichs aus dem Bild anhand angegebener Koordinaten:

\n\n

async function cropImage() {\n    await sharp('input.jpg')\n        .extract({\n            left: 100,   // Abstand von links\n            top: 50,     // Abstand von oben\n            width: 300,  // Breite des Bereichs\n            height: 200  // Höhe des Bereichs\n        })\n        .toFile('cropped.jpg');\n    \n    console.log('Zuschnitt ausgeführt');\n}

\n\n

Automatischer Zuschnitt bei resize

\n\n

Häufig ist es erforderlich, die Größe zu ändern und gleichzeitig das Bild zuzuschneiden. Dies erfolgt mit dem Parameter gravity oder position:

\n\n

async function cropAndResize() {\n    await sharp('input.jpg')\n        .resize(200, 200, {\n            fit: 'cover', // auf genaue