Sharp für JavaScript (Node.js): Komplettguide mit Beispielen

Einführung: Was ist Sharp und warum braucht man es?

Sharp ist eine leistungsstarke Bibliothek zur Bildverarbeitung, geschrieben in C++ mit einer benutzerfreundlichen API für Node.js. Sie ermöglicht das Konvertieren von Bildern der Formate JPEG, PNG, WebP, AVIF, TIFF und GIF in andere Formate sowie das Ändern der Größe, Zuschneiden, Drehen, Hinzufügen von Effekten und vieles mehr.

Der größte Vorteil von Sharp ist die Geschwindigkeit. Die Bibliothek nutzt die nativen libvips-Bibliotheken und ist dadurch um ein Vielfaches schneller als Alternativen wie Jimp oder gm. Sie eignet sich ideal für:

• Webserver und APIs — dynamische Verarbeitung von Avataren, Vorschaubildern und Bildoptimierung vor dem Upload.
• Stapelverarbeitung — Konvertierung tausender Bilder in das gewünschte Format und die gewünschte Größe.
• Erstellung von Miniaturansichten und Galerien — schnelle Generierung von Thumbnails.
• Optimierung der Bildgröße — Komprimierung ohne Qualitätsverlust (oder mit kontrolliertem Verlust).

Sharp arbeitet mit Buffern, Streams und Dateien, was es flexibel für die Integration in jede Node.js-Anwendung macht.

Installation

Die Installation von Sharp erfolgt über npm. Für die Bibliothek wird Node.js Version 12.13.0 oder höher empfohlen (mindestens 14+).

npm install sharp

Wenn Sie yarn verwenden:

yarn add sharp

Wichtig: Sharp kompiliert bei der Installation native Module. Falls Fehler auftreten, stellen Sie sicher, dass build-essential (unter Linux) oder Xcode Command Line Tools (unter macOS) installiert sind. Unter Windows reichen in der Regel die Visual Studio Build Tools.

Nach der Installation importieren Sie die Bibliothek in Ihr Projekt:

const sharp = require('sharp');

Schnellstart

Schreiben wir ein einfaches Skript, das ein Bild lädt, auf 300 Pixel Breite verkleinert (unter Beibehaltung der Proportionen) und im WebP-Format speichert.

const sharp = require('sharp');
const path = require('path');

async function quickStart() {
    try {
        await sharp('input.jpg')
            .resize(300) // Breite 300px, Höhe wird automatisch angepasst
            .webp({ quality: 80 }) // Konvertierung nach WebP mit 80% Qualität
            .toFile('output.webp');
        
        console.log('Bild erfolgreich verarbeitet!');
    } catch (error) {
        console.error('Fehler:', error);
    }
}

quickStart();

Dieses Beispiel zeigt die Methodenverkettung (chaining), die das Kernkonzept von Sharp ist. Jede Methode gibt eine neue Sharp-Instanz zurück, sodass Transformationen nacheinander angewendet werden können.

Wichtige Methoden und Funktionen

Im Folgenden werden 10 wichtige Sharp-Methoden mit detaillierter Beschreibung, Parametern und Codebeispielen vorgestellt.

1. resize() — Bildgröße ändern

Funktion: Ändert die Breite und/oder Höhe eines Bildes. Kann das Bild zuschneiden oder in einen bestimmten Rahmen einpassen.

Parameter:

• width (number, optional) — neue Breite in Pixeln.
• height (number, optional) — neue Höhe in Pixeln.
• options (object, optional):
  • fit (string) — Einpassungsmodus: 'cover' (ausfüllen, Überstehendes abschneiden), 'contain' (vollständig einpassen), 'fill' (strecken), 'inside' (verkleinern bis zum Einpassen), 'outside' (vergrößern bis zum Überstehen). Standard ist 'cover'.
  • position (string) — Position beim Zuschneiden: 'center', 'top', 'left', 'right', 'bottom' usw.
  • withoutEnlargement (boolean) — Vergrößerung des Bildes verbieten.

Beispiel:

// Auf 200x200 verkleinern, mittig zuschneiden
await sharp('input.jpg')
    .resize(200, 200, { fit: 'cover', position: 'center' })