Bildverarbeitung in Node.js: resize, crop mit Sharp und Jimp

Arbeiten mit Bildern in Node.js: resize und crop

In der modernen Webentwicklung besteht häufig die Notwendigkeit, Bilder serverseitig zu verarbeiten: Größe ändern, zuschneiden, Formate konvertieren. Node.js bietet mehrere leistungsstarke Bibliotheken für diese Aufgaben. In diesem Artikel betrachten wir die beiden bekanntesten — Sharp (hohe Leistung, basiert auf libvips) und Jimp (reines JavaScript, benötigt keine nativen Abhängigkeiten).

1. Installation und Vorbereitung

Erstellen Sie zunächst ein neues Projekt und installieren Sie eine der Bibliotheken:

mkdir image-processor && cd image-processornpm init -ynpm install sharp jimp

2. Größenänderung (resize) mit Sharp

Sharp ist eine schnelle C-Bibliothek, die sich hervorragend für die Produktion eignet. Sie unterstützt Streaming-Verarbeitung und automatische Formaterkennung.

const sharp = require('sharp');

// Einfaches Resize auf 300px Breite (Höhe behält Proportionen bei)sharp('input.jpg')  .resize(300)  .toFile('output-300.jpg')  .then(() => console.log('Fertig!'))  .catch(err => console.error(err));

// Erzwungenes Resize auf exakte Maße 200x200 (mit Verzerrung)sharp('input.jpg')  .resize(200, 200, { fit: 'fill' })  .toFile('output-fill.jpg');

// Intelligentes Resize mit Proportionen (zentrierter Zuschnitt)sharp('input.jpg')  .resize(200, 200, { fit: 'cover', position: 'centre' })  .toFile('output-cover.jpg');

3. Zuschneiden (crop) mit Sharp

Die Methode extract ermöglicht das Ausschneiden eines rechteckigen Bildbereichs.

const sharp = require('sharp');

// Bereich ausschneiden: left=100, top=50, width=400, height=300sharp('input.jpg')  .extract({ left: 100, top: 50, width: 400, height: 300 })  .toFile('cropped.jpg')  .then(info => console.log('Zugeschnitten:', info));

4. Arbeiten mit Jimp (reines JavaScript)

Jimp arbeitet langsamer als Sharp, benötigt jedoch keine Kompilierung nativer Module — ideal für einfache Aufgaben oder Umgebungen ohne Berechtigung zur Installation von Systempaketen.

const Jimp = require('jimp');

// resize auf 300px BreiteJimp.read('input.jpg')  .then(image => {    return image      .resize(300, Jimp.AUTO) // AUTO behält Proportionen bei      .writeAsync('output-jimp.jpg');  })  .then(() => console.log('Jimp resize fertig'))  .catch(err => console.error(err));

// crop (Zuschnitt) mit KoordinatenJimp.read('input.jpg')  .then(image => {    return image      .crop(100, 50, 400, 300) // x, y, width, height      .writeAsync('cropped-jimp.jpg');  })  .catch(err => console.error(err));

5. Kombiniertes Beispiel: resize + crop in einem Durchlauf

Oft muss zuerst zugeschnitten und dann verkleinert werden. Sharp erledigt dies effizient durch die interne Pipeline:

const sharp = require('sharp');

sharp('input.jpg')  .extract({ left: 50, top: 30, width: 800, height: 600 })  .resize(400, 300, { fit: 'cover' })  .toFile('result.jpg')  .then(info => console.log('Endgültige Größe:', info.width, 'x', info.height));

6. Vergleich Sharp vs Jimp

• Leistung: Sharp ist 5-10 Mal schneller bei großen Dateien.
• Installation: Jimp benötigt keine nativen Abhängigkeiten (einfach npm install).
• Funktionen: Sharp unterstützt mehr Formate (heif, tiff, avif) und erweiterte Filter.
• Streaming-Verarbeitung: Sharp arbeitet mit Node.js-Streams (pipe), Jimp nur mit Puffern.
• Empfehlung: Für stark ausgelastete Dienste wählen Sie Sharp. Für einfache Skripte oder Lernprojekte — Jimp.

7. Arbeiten mit Puffern (ohne Speichern in Datei)

Oft kommen Bilder über HTTP oder werden im Speicher gehalten. Beide Bibliotheken unterstützen die Arbeit mit Buffer:

const sharp = requ