Node.js-Module: jimp

jimp – Bildbearbeitung mit Node.js
Kommentare

Serveranwendungen mit Node.js sind dank Frameworks wie Express oder Koa überhaupt kein Problem. Auch die Anbindung an die verschiedensten Datenbanken sollte Sie nicht vor Schwierigkeiten stellen. Doch wie steht es um die Möglichkeiten, Bilder zu bearbeiten?

Benutzer laden Bilder hoch, die serverseitig weiterverarbeitet werden müssen. Das beginnt beim Drehen von Bildern und geht über das Verändern der Größe bis hin zum Einfügen von Wasserzeichen. Das klingt kompliziert und umfangreich – doch wie für fast alles, bietet auch hier das npm Repository eine Lösung.

Unter Lösungen wie gm und sharp fällt vor allem jimp auf, das „JavaScript Image Manipulation Program“. Es hat keine externen Abhängigkeiten wie GraphicsMagick oder ImageMagick, die zuvor installiert werden müssen. jimp ist vollständig in JavaScript implementiert, die Installation erfolgt lokal in Ihrer Applikation mit dem Kommando npm install jimp.

Bilder einlesen

jimp unterstützt verschiedene Formate wie JPEG, PNG oder BMP. Die Bilder können dabei sowohl vom lokalen Dateisystem als auch von einem URL gelesen werden. Bevor Sie mit der Bearbeitung beginnen, müssen Sie das Bild zunächst einmal mit der read-Methode einlesen. Sie unterstützt sowohl Callbacks als auch Promises.

Jimp.read('helloKitty.jpg').then((image) => {
  // Image manipulation here
});

jimp stellt Ihnen einige Informationen zum eingelesenen Bild über das Image-Objekt zur Verfügung; so können Sie beispielsweise den Mime-Typ auslesen und verlässlich das Format des Bilds bestimmen – somit müssen Sie sich nicht auf das vom Nutzer durch die Dateiendung angegebene Format verlassen. Neben dem Mime-Typ können Sie außerdem die Dimensionen des Bilds auslesen.

Node.js-Tutorial mit Sebastian Springer

 Im Entwickler-Tutorial „Start in Node.js“ mit Sebastian Springer erfahren Sie, wofür und wie Sie Node.js gewinnbringend einsetzen können. Anhand praktischer Beispiele lernen Sie die verschiedenen Features und Anwendungsmöglichkeiten kennen.node-js-tutorial

Bilder bearbeiten

Das Bild-Objekt, das die read-Methode zurückliefert, bietet eine Reihe von Methoden zur Bearbeitung des ursprünglichen Bilds (Tabelle 1).

Tabelle 1: Methoden zur Bildbearbeitung in jimp

Tabelle 1: Methoden zur Bildbearbeitung in jimp

Die Bearbeitung des Bilds erfolgt nicht auf dem Original, sondern im Puffer. Das bedeutet, dass Sie sich um das Speichern des Bilds kümmern müssen; tun Sie das nicht, gehen die Änderungen beim Verlassen des Scopes verloren.

Um ein Bild also auf die halbe Größe zu skalieren und das Resultat zu speichern, können Sie den folgenden Quellcode verwenden:

const Jimp = require("jimp");
Jimp.read(‘helloKitty.jpg').then((image) => {
  image
    .scale(0.5)
    .write('helloKitty.small.jpg');
});

Alle jimp-Methoden geben wiederum ein Image-Objekt zurück, sodass Sie über ein Fluent Interface gleich mehrere Operationen anwenden können, bevor Sie die Datei speichern. So können Sie das Bild skalieren, drehen und einen Teil davon ausschneiden.

Weitere Features

Sie können mit jimp nicht nur die Abmessungen Ihrer Bilder ändern, sondern auch verschiedene Filter darauf anwenden. So können Sie die Helligkeit und den Kontrast anpassen, die Farben invertieren oder komplett entfernen, indem Sie einen Graufilter anwenden. Um Ihr Bild etwas aufzuhellen und anschließend einen Blur-Filter anzuwenden, gehen Sie wie folgt vor:

const Jimp = require("jimp");
Jimp.read('helloKitty.jpg').then((image) => {
  image.brightness(0.4)
    .blur(5)
    .write('helloKitty.effect.jpg');
});

Häufig wird auf Bildern ein mehr oder weniger auffälliges Wasserzeichen angebracht, um das Kopieren und Weiterverwenden geschützter Bilder zu verhindern oder zumindest zu erschweren. Mit dem folgenden Codeschnipsel fügen Sie einen Text auf Ihrem Bild ein:

const Jimp = require("jimp");
Jimp.read('helloKitty.jpg').then((image) => {
Jimp.loadFont(Jimp.FONT_SANS_128_BLACK).then((font) => {
image.print(font, 10, 10, 'Finger weg, Basti seins!')
.write('helloKitty.font.jpg');
});
});

Fazit

Mit jimp lassen sich die häufigsten Aufgaben, die in der serverseitigen Bildbearbeitung entstehen, recht komfortabel lösen. Der Funktionsumfang deckt sowohl einfache Größenveränderungen als auch die Anwendung verschiedener Filter und das Platzieren von Text ab.

Die Schnittstelle, die jimp bietet, ist durch die Promises gut mit asynchronen Funktionen kombinierbar. Die Verkettung der verschiedenen Operationen führt zu gut lesbarem und leicht verständlichem Quellcode. jimp ist auf jeden Fall einen genaueren Blick wert.

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -