© saicle/Shutterstock.com
PHP Magazin
Bildbearbeitung mit Node.js

Node.js-Module: jimp

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?

Sebastian Springer


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.

Bilder bearbeiten

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

resize(w, h)Breite und Höhe des Bilds anpassenscale(f)Skalierung anhand eines Faktorscrop(x, y, w, h)Bildausschnittmirror(horz, vert)Bild spiegelnflip(horz, vert)Bild kippenrotate(deg)Bild drehen

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 Dat...

PHP Magazin
Bildbearbeitung mit Node.js

Node.js-Module: jimp

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?

Sebastian Springer


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.

Bilder bearbeiten

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

resize(w, h)Breite und Höhe des Bilds anpassenscale(f)Skalierung anhand eines Faktorscrop(x, y, w, h)Bildausschnittmirror(horz, vert)Bild spiegelnflip(horz, vert)Bild kippenrotate(deg)Bild drehen

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 Dat...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang