So verarbeiten Sie Bilder in Node.js mit Sharp

Der Autor hat den Diversity in Tech Fund ausgewählt, um eine Spende im Rahmen des Write for DOnations-Programms zu erhalten.

Einführung

Die digitale Bildverarbeitung ist eine Methode zur Analyse und Manipulation von Bildern mithilfe eines Computers. Der Prozess umfasst das Lesen eines Bildes, das Anwenden von Methoden zur Veränderung oder Verbesserung des Bildes und das anschließende Speichern des bearbeiteten Bildes. Es ist üblich, dass Anwendungen, die benutzerhochgeladene Inhalte verarbeiten, Bilder verarbeiten. Zum Beispiel, wenn Sie eine Webanwendung schreiben, die Benutzern das Hochladen von Bildern ermöglicht, können Benutzer unnötig große Bilder hochladen. Dies kann sich negativ auf die Ladezeit der Anwendung auswirken und auch Ihren Serverplatz verschwenden. Mit der Bildverarbeitung kann Ihre Anwendung alle hochgeladenen Bilder der Benutzer verkleinern und komprimieren, was die Leistung Ihrer Anwendung erheblich verbessern und den Speicherplatz auf Ihrem Server sparen kann.

Node.js hat ein Ökosystem von Bibliotheken, die Sie zur Verarbeitung von Bildern verwenden können, wie zum Beispiel sharp, jimp und das gm-Modul. Dieser Artikel wird sich auf das sharp-Modul konzentrieren. sharp ist eine beliebte Node.js-Bibliothek zur Bildverarbeitung, die verschiedene Bildformate unterstützt, wie zum Beispiel JPEG, PNG, GIF, WebP, AVIF, SVG und TIFF.

In diesem Tutorial werden Sie sharp verwenden, um ein Bild zu lesen und seine Metadaten zu extrahieren, es zu verkleinern, das Format zu ändern und das Bild zu komprimieren. Sie werden dann ein Bild zuschneiden, in Graustufen umwandeln, drehen und verwischen. Schließlich werden Sie Bilder zusammensetzen und Text auf ein Bild hinzufügen. Am Ende dieses Tutorials werden Sie ein gutes Verständnis dafür haben, wie man Bilder in Node.js verarbeitet.

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigen Sie:

• Node.js in Ihrer lokalen Entwicklungsumgebung einrichten. Sie können Hier erfahren Sie, wie Sie Node.js installieren und eine lokale Entwicklungsumgebung einrichten, um zu lernen, wie Sie Node.js und npm auf Ihrem System installieren.

• Grundkenntnisse darüber, wie man ein Node.js-Programm schreibt und ausführt. Sie können Hier lernen Sie die Grundlagen, wie Sie Ihr erstes Programm in Node.js schreiben und ausführen können, um die Grundlagen zu erlernen.

• Grundverständnis für asynchrones Programmieren in JavaScript. Folgen Sie Hier erfahren Sie mehr über die Ereignisschleife, Rückrufe, Versprechungen und async/await in JavaScript, um das asynchrone Programmieren zu überprüfen.

Schritt 1 — Einrichten des Projektverzeichnisses und Herunterladen von Bildern

Bevor Sie mit dem Schreiben Ihres Codes beginnen, müssen Sie das Verzeichnis erstellen, das den Code und die Bilder enthält, die Sie in diesem Artikel verwenden werden.

Öffnen Sie Ihr Terminal und erstellen Sie das Verzeichnis für das Projekt mit dem Befehl mkdir:

mkdir process_images

Wechseln Sie in das neu erstellte Verzeichnis mit dem Befehl cd:

cd process_images

Erstellen Sie eine package.json-Datei mit dem Befehl npm init, um die Projektabhängigkeiten zu verfolgen:

npm init -y

Die Option -y teilt npm mit, die Standard-package.json-Datei zu erstellen.

Installieren Sie als nächstes sharp als Abhängigkeit:

npm install sharp

Sie werden die folgenden drei Bilder in diesem Tutorial verwenden:

Als nächstes laden Sie die Bilder in Ihrem Projektverzeichnis mit dem curl-Befehl herunter.

Verwenden Sie den folgenden Befehl, um das erste Bild herunterzuladen. Dadurch wird das Bild als sammy.png heruntergeladen:

curl -O https://assets.digitalocean.com/how-to-process-images-in-node-js-with-sharp/sammy.png

Laden Sie als nächstes das zweite Bild mit folgendem Befehl herunter. Dadurch wird das Bild als underwater.png heruntergeladen:

curl -O https://assets.digitalocean.com/how-to-process-images-in-node-js-with-sharp/underwater.png

Schließlich laden Sie das dritte Bild mit dem folgenden Befehl herunter. Dadurch wird das Bild als sammy-transparent.png heruntergeladen:

curl -O https://assets.digitalocean.com/how-to-process-images-in-node-js-with-sharp/sammy-transparent.png

Mit dem Projektverzeichnis und den eingerichteten Abhängigkeiten sind Sie nun bereit, Bilder zu verarbeiten.

Schritt 2 — Bilder lesen und Metadaten ausgeben

In diesem Abschnitt schreiben Sie Code, um ein Bild zu lesen und seine Metadaten zu extrahieren. Bildmetadaten sind Text, der in ein Bild eingebettet ist und Informationen über das Bild wie Typ, Breite und Höhe enthält.

Um die Metadaten zu extrahieren, importieren Sie zunächst das Modul sharp, erstellen eine Instanz von sharp und übergeben den Bildpfad als Argument. Anschließend verknüpfen Sie die metadata()-Methode mit der Instanz, um die Metadaten zu extrahieren und sie in die Konsole zu protokollieren.

Um dies zu tun, erstellen und öffnen Sie die Datei readImage.js in Ihrem bevorzugten Texteditor. Dieses Tutorial verwendet einen Terminal-Texteditor namens nano:

nano readImage.js

Als nächstes erfordern Sie am Anfang der Datei sharp:

const sharp = require("sharp");

Sharp ist ein auf Versprechen basierendes Bildverarbeitungsmodul. Wenn Sie eine sharp-Instanz erstellen, gibt sie ein Versprechen zurück. Sie können das Versprechen mit der then-Methode auflösen oder async/await verwenden, was eine sauberere Syntax bietet.

Um die Syntax von async/await zu verwenden, müssen Sie eine asynchrone Funktion erstellen, indem Sie das Schlüsselwort async am Anfang der Funktion platzieren. Dadurch können Sie das Schlüsselwort await innerhalb der Funktion verwenden, um das Versprechen aufzulösen, das zurückgegeben wird, wenn Sie ein Bild lesen.

In Ihrer Datei readImage.js definieren Sie eine asynchrone Funktion getMetadata(), um das Bild zu lesen, seine Metadaten zu extrahieren und sie in die Konsole zu protokollieren:

const sharp = require("sharp");

async function getMetadata() {
  const metadata = await sharp("sammy.png").metadata();
  console.log(metadata);
}

getMetadata() ist eine asynchrone Funktion, die das async Schlüsselwort verwendet, das Sie vor dem function Label definiert haben. Dies ermöglicht die Verwendung der await Syntax innerhalb der Funktion. Die getMetadata() Funktion liest ein Bild ein und gibt ein Objekt mit seinen Metadaten zurück.

Im Funktionskörper lesen Sie das Bild, indem Sie sharp() aufrufen, das den Bildpfad als Argument benötigt, hier mit sammy.png.

Neben der Angabe eines Bildpfads kann sharp() auch Bilddaten aus einem Buffer, Uint8Array oder Uint8ClampedArray lesen, sofern das Bild im JPEG-, PNG-, GIF-, WebP-, AVIF-, SVG- oder TIFF-Format vorliegt.

Wenn Sie nun sharp() verwenden, um das Bild zu lesen, wird eine sharp-Instanz erstellt. Sie hängen dann die metadata()-Methode des Sharp-Moduls an die Instanz an. Die Methode gibt ein Objekt zurück, das die Bildmetadaten enthält, die Sie in der Variablen metadata speichern und deren Inhalt mit console.log() ausgeben.

Ihr Programm kann nun ein Bild lesen und dessen Metadaten zurückgeben. Wenn jedoch während der Ausführung ein Fehler auftritt, stürzt das Programm ab. Um dies zu umgehen, müssen Sie die Fehler erfassen, wenn sie auftreten.

Um dies zu tun, wickeln Sie den Code innerhalb der getMetadata()-Funktion in einen try...catch-Block ein:

const sharp = require("sharp");

async function getMetadata() {
  try {
    const metadata = await sharp("sammy.png").metadata();
    console.log(metadata);
  } catch (error) {
    console.log(`An error occurred during processing: ${error}`);
  }
}

Innerhalb des try-Blocks lesen Sie ein Bild, extrahieren und protokollieren seine Metadaten. Wenn während dieses Vorgangs ein Fehler auftritt, überspringt die Ausführung den catch-Abschnitt und protokolliert den Fehler, um zu verhindern, dass das Programm abstürzt.

Zum Schluss rufen Sie die getMetadata()-Funktion auf, indem Sie die markierte Zeile hinzufügen:

const sharp = require("sharp");

async function getMetadata() {
  try {
    const metadata = await sharp("sammy.png").metadata();
    console.log(metadata);
  } catch (error) {
    console.log(`An error occurred during processing: ${error}`);
  }
}

getMetadata();

Speichern Sie nun die Datei und beenden Sie sie. Geben Sie y ein, um die vorgenommenen Änderungen in der Datei zu speichern, und bestätigen Sie den Dateinamen durch Drücken der ENTER– oder RETURN-Taste.

Führen Sie die Datei mit dem Befehl node aus:

node readImage.js

Sie sollten eine Ausgabe sehen, die ähnlich aussieht wie diese:

Output
{
  format: 'png',
  width: 750,
  height: 483,
  space: 'srgb',
  channels: 3,
  depth: 'uchar',
  density: 72,
  isProgressive: false,
  hasProfile: false,
  hasAlpha: false
}

Nun, da Sie ein Bild gelesen und seine Metadaten extrahiert haben, werden Sie nun ein Bild verkleinern, sein Format ändern und es komprimieren.

Schritt 3 — Verkleinern, Ändern des Bildformats und Komprimieren von Bildern

Das Verkleinern ist der Vorgang, bei dem die Abmessungen eines Bildes ohne Ausschneiden verändert werden, was die Dateigröße des Bildes beeinflusst. In diesem Abschnitt werden Sie ein Bild verkleinern, seinen Bildtyp ändern und das Bild komprimieren. Die Bildkomprimierung ist der Vorgang, bei dem die Dateigröße eines Bildes reduziert wird, ohne dabei an Qualität zu verlieren.

Zuerst wirst du die Methode resize() von der Instanz sharp verketten, um das Bild zu verkleinern, und es im Projektverzeichnis speichern. Zweitens wirst du die Methode format() an das verkleinerte Bild anhängen, um das Format von png auf jpeg zu ändern. Außerdem wirst du eine Option an die Methode format() übergeben, um das Bild zu komprimieren und im Verzeichnis zu speichern.

Erstelle und öffne die Datei resizeImage.js in deinem Texteditor:

nano resizeImage.js

Füge den folgenden Code hinzu, um das Bild auf eine Breite von 150px und eine Höhe von 97px zu verkleinern:

const sharp = require("sharp");

async function resizeImage() {
  try {
    await sharp("sammy.png")
      .resize({
        width: 150,
        height: 97
      })
      .toFile("sammy-resized.png");
  } catch (error) {
    console.log(error);
  }
}

resizeImage();

Die Funktion resizeImage() verknüpft die Methode resize() des Moduls sharp mit der Instanz sharp. Die Methode nimmt ein Objekt als Argument entgegen. Im Objekt legst du die gewünschten Bildabmessungen fest, indem du die Eigenschaften width und height verwendest. Wenn du die width auf 150 und die height auf 97 setzt, wird das Bild 150px breit und 97px hoch sein.

Nach dem Verkleinern des Bildes verknüpfst du die Methode toFile() des Moduls sharp, die den Bildpfad als Argument nimmt. Durch die Übergabe von sammy-resized.png als Argument wird die Bilddatei unter diesem Namen im Arbeitsverzeichnis deines Programms gespeichert.

Speichere und verlasse nun die Datei. Führe dein Programm im Terminal aus:

node resizeImage.js

Es wird keine Ausgabe erscheinen, aber du solltest eine neue Bilddatei mit dem Namen sammy-resized.png im Projektverzeichnis sehen.

Öffnen Sie das Bild auf Ihrem lokalen Gerät. Sie sollten ein Bild von Sammy sehen, das 150px breit und 97px hoch ist:

Jetzt, da Sie ein Bild verkleinern können, werden Sie als nächstes das Format des verkleinerten Bildes von png in jpeg umwandeln, das Bild komprimieren und es im Arbeitsverzeichnis speichern. Um dies zu tun, verwenden Sie die toFormat()-Methode, die Sie nach der resize()-Methode anhängen werden.

Fügen Sie den hervorgehobenen Code hinzu, um das Bildformat in jpeg zu ändern und es zu komprimieren:

const sharp = require("sharp");

async function resizeImage() {
  try {
    await sharp("sammy.png")
      .resize({
        width: 150,
        height: 97
      })
      .toFormat("jpeg", { mozjpeg: true })
      .toFile("sammy-resized-compressed.jpeg");
  } catch (error) {
    console.log(error);
  }
}

resizeImage();

In der Funktion resizeImage() verwenden Sie die toFormat()-Methode des sharp-Moduls, um das Bildformat zu ändern und zu komprimieren. Das erste Argument der toFormat()-Methode ist ein String, der das Bildformat enthält, in das Sie Ihr Bild konvertieren möchten. Das zweite Argument ist ein optionales Objekt, das Ausgabeoptionen enthält, um das Bild zu verbessern und zu komprimieren.

Um das Bild zu komprimieren, übergeben Sie ihm eine mozjpeg-Eigenschaft, die einen booleschen Wert enthält. Wenn Sie es auf true setzen, verwendet sharp die Standardeinstellungen von mozjpeg, um das Bild ohne Qualitätsverlust zu komprimieren. Das Objekt kann auch weitere Optionen enthalten; siehe die sharp Dokumentation für weitere Details.

Dann geben Sie der Methode toFile() einen anderen Dateinamen, um das komprimierte Bild als sammy-resized-compressed.jpeg zu speichern.

Speichern und verlassen Sie jetzt die Datei, und führen Sie dann Ihren Code mit folgendem Befehl aus:

node resizeImage.js

Sie erhalten keine Ausgabe, aber eine Bilddatei sammy-resized-compressed.jpeg wird in Ihrem Projektverzeichnis gespeichert sein.

Öffnen Sie das Bild auf Ihrem lokalen Rechner, und Sie sehen das folgende Bild:

Mit Ihrem jetzt komprimierten Bild überprüfen Sie die Dateigröße, um die erfolgreiche Komprimierung zu bestätigen. Führen Sie in Ihrem Terminal den Befehl du aus, um die Dateigröße von sammy.png zu überprüfen:

du -h sammy.png

Die Option -h liefert eine menschenlesbare Ausgabe, die Ihnen die Dateigröße in Kilobyte, Megabyte und vielem mehr anzeigt.

Nach Ausführung des Befehls sehen Sie eine Ausgabe ähnlich wie diese:

Output
120K    sammy.png

Die Ausgabe zeigt, dass das Originalbild 120 Kilobyte groß ist.

Überprüfen Sie als Nächstes die Dateigröße von sammy-resized.png:

du -h sammy-resized.png

Nach Ausführung des Befehls sehen Sie die folgende Ausgabe:

Output
8.0K     sammy-resized.png

sammy-resized.png ist von 120 Kilobyte auf 8 Kilobyte gesunken. Dies zeigt, dass die Änderung der Größe die Dateigröße beeinflusst.

Überprüfen Sie nun die Dateigröße für sammy-resized-compressed.jpeg:

du -h sammy-resized-compressed.jpeg

Nach Ausführen des Befehls sehen Sie die folgende Ausgabe:

Output
4.0K    sammy-resized-compressed.jpeg

Die Datei sammy-resized-compressed.jpeg ist nun von 8 Kilobyte auf 4 Kilobyte gesunken, was Ihnen 4 Kilobyte einspart und zeigt, dass die Komprimierung funktioniert hat.

Jetzt, da Sie ein Bild verkleinert, das Format geändert und komprimiert haben, werden Sie das Bild zuschneiden und in Graustufen konvertieren.

Schritt 4 — Zuschneiden und Konvertieren von Bildern in Graustufen

In diesem Schritt werden Sie ein Bild zuschneiden und es in Graustufen konvertieren. Das Zuschneiden ist der Vorgang des Entfernens unerwünschter Bereiche aus einem Bild. Sie werden die Methode extend() verwenden, um das Bild sammy.png zu zuschneiden. Danach werden Sie die Methode grayscale() an die zugeschnittene Bildinstanz anhängen und es in Graustufen konvertieren.

Erstellen und öffnen Sie cropImage.js in Ihrem Texteditor:

nano cropImage.js

Fügen Sie Ihrem cropImage.js-Datei den folgenden Code hinzu:

const sharp = require("sharp");

async function cropImage() {
  try {
    await sharp("sammy.png")
      .extract({ width: 500, height: 330, left: 120, top: 70  })
      .toFile("sammy-cropped.png");
  } catch (error) {
    console.log(error);
  }
}

cropImage();

Die Funktion cropImage() ist eine asynchrone Funktion, die ein Bild liest und Ihr zugeschnittenes Bild zurückgibt. Innerhalb des try-Blocks liest eine Instanz von sharp das Bild. Dann nimmt die Methode extract() des sharp-Moduls, die an die Instanz angehängt ist, ein Objekt mit den folgenden Eigenschaften:

• width: die Breite des Bereichs, den Sie zuschneiden möchten.
• height: die Höhe des Bereichs, den Sie zuschneiden möchten.
• top: die vertikale Position des Bereichs, den Sie zuschneiden möchten.
• left: die horizontale Position des Bereichs, den Sie zuschneiden möchten.

Wenn Sie die width auf 500 und die height auf 330 setzen, stellen Sie sich vor, dass sharp eine transparente Box über dem Bild erstellt, das Sie zuschneiden möchten. Jeder Teil des Bildes, der in die Box passt, bleibt erhalten, und der Rest wird abgeschnitten:

Die Eigenschaften top und left steuern die Position der Box. Wenn Sie left auf 120 setzen, befindet sich die Box 120px vom linken Rand des Bildes entfernt, und das Setzen von top auf 70 positioniert die Box 70px vom oberen Rand des Bildes entfernt.

Der Bereich des Bildes, der innerhalb der Box passt, wird extrahiert und als separates Bild unter dem Namen sammy-cropped.png gespeichert.

Speichern und verlassen Sie die Datei. Führen Sie das Programm im Terminal aus:

node cropImage.js

Die Ausgabe wird nicht angezeigt, aber das Bild sammy-cropped.png wird in Ihrem Projektverzeichnis gespeichert.

Öffnen Sie das Bild auf Ihrem lokalen Rechner. Sie sollten das zugeschnittene Bild sehen:

Nun, da Sie ein Bild zugeschnitten haben, werden Sie das Bild in Graustufen konvertieren. Um dies zu tun, werden Sie die grayscale-Methode der sharp-Instanz verketten. Fügen Sie den hervorgehobenen Code hinzu, um das Bild in Graustufen zu konvertieren:

const sharp = require("sharp");

async function cropImage() {
  try {
    await sharp("sammy.png")
      .extract({ width: 500, height: 330, left: 120, top: 70 })
      .grayscale()
      .toFile("sammy-cropped-grayscale.png");
  } catch (error) {
    console.log(error);
  }
}

cropImage();

Die Funktion cropImage() wandelt das zugeschnittene Bild in Graustufen um, indem sie die grayscale()-Methode des sharp-Moduls an die sharp-Instanz anhängt. Dann speichert sie das Bild im Projektverzeichnis als sammy-cropped-grayscale.png.

Drücken Sie Strg+X, um die Datei zu speichern und zu verlassen.

Führen Sie Ihren Code im Terminal aus:

node cropImage.js

Öffnen Sie sammy-cropped-grayscale.png auf Ihrem lokalen Rechner. Sie sollten das Bild jetzt in Graustufen sehen:

Nun, da Sie das Bild zugeschnitten und extrahiert haben, werden Sie daran arbeiten, es zu drehen und zu verwischen.

Schritt 5 — Bilder drehen und verwischen

In diesem Schritt werden Sie das Bild sammy.png um 33 Grad drehen. Außerdem wenden Sie einen Gaußschen Weichzeichner auf das gedrehte Bild an. Ein Gaußscher Weichzeichner ist eine Technik, um ein Bild mithilfe der Gauß-Funktion zu verwischen, welche den Rauschpegel und die Details auf einem Bild reduziert.

Erstellen Sie eine Datei rotateImage.js in Ihrem Texteditor:

nano rotateImage.js

In Ihrer Datei rotateImage.js schreiben Sie den folgenden Codeblock, um eine Funktion zu erstellen, die sammy.png um einen Winkel von 33 Grad dreht:

const sharp = require("sharp");

async function rotateImage() {
  try {
    await sharp("sammy.png")
      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
      .toFile("sammy-rotated.png");
  } catch (error) {
    console.log(error);
  }
}

rotateImage();

Die Funktion rotateImage() ist eine asynchrone Funktion, die ein Bild liest und das Bild um einen Winkel von 33 Grad dreht. Innerhalb der Funktion nimmt die rotate()-Methode des sharp-Moduls zwei Argumente entgegen. Das erste Argument ist der Rotationswinkel von 33 Grad. Standardmäßig macht sharp den Hintergrund des gedrehten Bildes schwarz. Um den schwarzen Hintergrund zu entfernen, übergeben Sie als zweites Argument ein Objekt, um den Hintergrund transparent zu machen.

Das Objekt hat eine background-Eigenschaft, die ein Objekt definiert, das das RGBA-Farbmodell enthält. RGBA steht für Rot, Grün, Blau und Alpha.

• r: Steuert die Intensität der roten Farbe. Es akzeptiert einen ganzzahligen Wert von 0 bis 255. 0 bedeutet, dass die Farbe nicht verwendet wird, und 255 ist Rot in seiner höchsten Intensität.

• g: Steuert die Intensität der grünen Farbe. Es akzeptiert einen ganzzahligen Wert von 0 bis 255. 0 bedeutet, dass die Farbe Grün nicht verwendet wird, und 255 ist Grün in seiner höchsten Intensität.

• b: Steuert die Intensität von Blau. Es akzeptiert ebenfalls einen ganzzahligen Wert zwischen 0 und 255. 0 bedeutet, dass die blaue Farbe nicht verwendet wird, und 255 ist Blau in seiner höchsten Intensität.

• alpha: kontrolliert die Deckkraft der Farbe, die durch die Eigenschaften r, g und b definiert ist. 0 oder 0.0 macht die Farbe transparent und 1 oder 1.1 macht die Farbe deckend.

Um die alpha-Eigenschaft zu nutzen, müssen Sie sicherstellen, dass Sie die Werte für r, g und b definieren und setzen. Indem Sie die Werte von r, g und b auf 0 setzen, erzeugen Sie eine schwarze Farbe. Um einen transparenten Hintergrund zu erzeugen, müssen Sie zuerst eine Farbe definieren, und dann können Sie alpha auf 0 setzen, um sie transparent zu machen.

Speichern Sie jetzt und verlassen Sie die Datei. Führen Sie Ihr Skript im Terminal aus:

node rotateImage.js

Überprüfen Sie die Existenz von sammy-rotated.png in Ihrem Projektverzeichnis. Öffnen Sie es auf Ihrem lokalen Rechner.

Sie sollten das Bild um einen Winkel von 33 Grad gedreht sehen:

Als nächstes werden Sie das gedrehte Bild verschwommen machen. Sie erreichen dies, indem Sie die Methode blur() an die Instanz sharp anhängen.

Geben Sie den unten hervorgehobenen Code ein, um das Bild zu verschwimmen:

const sharp = require("sharp");

async function rotateImage() {
  try {
    await sharp("sammy.png")
      .rotate(33, { background: { r: 0, g: 0, b: 0, alpha: 0 } })
      .blur(4)
      .toFile("sammy-rotated-blurred.png");
  } catch (error) {
    console.log(error);
  }
}

rotateImage();

Die Funktion rotateImage() liest nun das Bild, dreht es und wendet einen Gaußschen Weichzeichner auf das Bild an. Dabei wird ein Gaußscher Weichzeichner auf das Bild angewendet, indem die blur()-Methode des sharp-Moduls verwendet wird. Die Methode akzeptiert ein einzelnes Argument, das einen Sigma-Wert zwischen 0,3 und 1000 enthält. Wenn Sie 4 übergeben, wird ein Gaußscher Weichzeichner mit einem Sigma-Wert von 4 angewendet. Nachdem das Bild verwischt wurde, definieren Sie einen Pfad, um das verwischte Bild zu speichern.

Ihr Skript wird nun das gedrehte Bild mit einem Sigma-Wert von 4 verwischen. Speichern und beenden Sie die Datei, und führen Sie dann das Skript in Ihrem Terminal aus:

node rotateImage.js

Nachdem das Skript ausgeführt wurde, öffnen Sie die Datei sammy-rotated-blurred.png auf Ihrem lokalen Rechner. Sie sollten jetzt das gedrehte Bild verwischt sehen:

Nachdem Sie ein Bild gedreht und verwischt haben, werden Sie ein Bild über ein anderes komponieren.

Schritt 6 — Komposition von Bildern mit composite()

Bildkomposition ist ein Prozess, bei dem zwei oder mehr separate Bilder kombiniert werden, um ein einzelnes Bild zu erstellen. Dies wird gemacht, um Effekte zu erzeugen, die die besten Elemente aus den verschiedenen Fotos enthalten. Ein weiterer häufiger Anwendungsfall ist das Hinzufügen eines Wasserzeichens zu einem Bild mit einem Logo.

In diesem Abschnitt werden Sie sammy-transparent.png über underwater.png komponieren. Dadurch entsteht die Illusion, dass Sammy tief im Ozean schwimmt. Um die Bilder zu komponieren, werden Sie die composite()-Methode an die sharp-Instanz anhängen.

Erstellen und öffnen Sie die Datei compositeImage.js in Ihrem Texteditor:

nano compositeImages.js

Erstellen Sie nun eine Funktion zum Komponieren der beiden Bilder, indem Sie den folgenden Code in die Datei compositeImages.js einfügen:

const sharp = require("sharp");

async function compositeImages() {
  try {
    await sharp("underwater.png")
      .composite([
        {
          input: "sammy-transparent.png",
          top: 50,
          left: 50,
        },
      ])
      .toFile("sammy-underwater.png");
  } catch (error) {
    console.log(error);
  }
}

compositeImages()

Die Funktion compositeImages() liest zuerst das Bild underwater.png. Anschließend hängen Sie die composite()-Methode des sharp-Moduls an, die ein Array als Argument erhält. Das Array enthält ein einzelnes Objekt, das das Bild sammy-transparent.png liest. Das Objekt hat folgende Eigenschaften:

• input: nimmt den Pfad des Bildes an, das über das verarbeitete Bild komponiert werden soll. Es akzeptiert auch einen Buffer, Uint8Array oder Uint8ClampedArray als Eingabe.
• top: steuert die vertikale Position des Bildes, das überkomponiert werden soll. Wenn Sie top auf 50 setzen, wird das Bild sammy-transparent.png um 50px vom oberen Rand des Bildes underwater.png verschoben.
• left: kontrolliert die horizontale Position des Bildes, das Sie über ein anderes komponieren möchten. Wenn Sie left auf 50 setzen, versetzt dies das sammy-transparent.png-Bild um 50px von der linken Kante des underwater.png-Bildes.

Die composite()-Methode erfordert ein Bild ähnlicher Größe oder kleiner als das verarbeitete Bild.

Um sich vorzustellen, was die composite()-Methode tut, denken Sie daran, dass sie einen Stapel von Bildern erstellt. Das Bild sammy-transparent.png wird über das Bild underwater.png gelegt:

Die Werte top und left positionieren das Bild sammy-transparent.png relativ zum Bild underwater.png.

Speichern Sie Ihr Skript und verlassen Sie die Datei. Führen Sie Ihr Skript aus, um eine Bildkomposition zu erstellen:

node compositeImages.js

Öffnen Sie sammy-underwater.png auf Ihrem lokalen Rechner. Sie sollten nun das sammy-transparent.png-Bild über dem underwater.png-Bild sehen:

Sie haben nun Bilder mithilfe der composite()-Methode komponiert. Im nächsten Schritt verwenden Sie die composite()-Methode, um Text zu einem Bild hinzuzufügen.

Schritt 7 — Text zu einem Bild hinzufügen

In diesem Schritt werden Sie Text auf ein Bild schreiben. Zum Zeitpunkt des Schreibens hat sharp keinen nativen Weg, um Text zu einem Bild hinzuzufügen. Um Text hinzuzufügen, werden Sie zuerst Code schreiben, um Text mit Scalable Vector Graphics (SVG) zu zeichnen. Nachdem Sie das SVG-Bild erstellt haben, werden Sie Code schreiben, um das Bild mit dem sammy.png Bild mit der Methode composite zu kombinieren.

SVG ist eine auf XML basierende Auszeichnungssprache zur Erstellung von Vektorgrafiken für das Web. Sie können Text oder Formen wie Kreise, Dreiecke zeichnen, sowie komplexe Formen wie Illustrationen, Logos usw. zeichnen. Die komplexen Formen werden mit einem Grafiktool wie Inkscape erstellt, das den SVG-Code generiert. Die SVG-Formen können gerendert und auf jede Größe skaliert werden, ohne an Qualität zu verlieren.

Erstellen und öffnen Sie die Datei addTextOnImage.js in Ihrem Texteditor.

nano addTextOnImage.js

In Ihrer Datei addTextOnImage.js fügen Sie den folgenden Code hinzu, um einen SVG-Container zu erstellen:

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
    </svg>
    `;
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

Die Funktion addTextOnImage() definiert vier Variablen: width, height, text und svgImage. width hält den Integer 750, und height hält den Integer 483. text hält den String Sammy the Shark. Dies ist der Text, den Sie mit SVG zeichnen werden.

Die Variable svgImage enthält das svg-Element. Das svg-Element hat zwei Attribute: width und height, die die zuvor definierten Variablen width und height interpolieren. Das svg-Element erstellt einen transparenten Container entsprechend der angegebenen Breite und Höhe.

Sie haben dem svg-Element eine width von 750 und eine height von 483 zugewiesen, damit das SVG-Bild dieselbe Größe wie sammy.png hat. Dies wird dabei helfen, dass der Text zentriert auf dem Bild sammy.png aussieht.

Anschließend werden die Textgrafiken gezeichnet. Fügen Sie den hervorgehobenen Code hinzu, um Sammy the Shark auf dem SVG-Container zu zeichnen:

async function addTextOnImage() {
    ...
    const svg = `
    <svg width="${width}" height="${height}">
    <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
  ....
}

Das SVG-text-Element hat vier Attribute: x, y, text-anchor und class. x und y definieren die Position für den Text, den Sie auf dem SVG-Container zeichnen. Das Attribut x positioniert den Text horizontal, und das Attribut y positioniert den Text vertikal.

Das Setzen von x auf 50% zeichnet den Text in der Mitte des Containers auf der x-Achse, und das Setzen von y auf 50% positioniert den Text in der Mitte auf der y-Achse des SVG-Bildes.

Der text-anchor richtet den Text horizontal aus. Das Setzen von text-anchor auf middle wird den Text am Zentrum der von Ihnen angegebenen x-Koordinate ausrichten.

class definiert einen Klassennamen auf dem text-Element. Sie verwenden den Klassennamen, um CSS-Stile auf das text-Element anzuwenden.

${text} interpoliert den String Sammy the Shark, der in der Variablen text gespeichert ist. Dies ist der Text, der auf dem SVG-Bild gezeichnet wird.

Fügen Sie anschließend den hervorgehobenen Code hinzu, um den Text mit CSS zu formatieren:

    const svg = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;

In diesem Code ändert fill die Textfarbe in Schwarz, font-size ändert die Schriftgröße und font-weight ändert die Schriftstärke.

Zu diesem Zeitpunkt haben Sie den Code geschrieben, der erforderlich ist, um den Text Sammy the Shark mit SVG zu zeichnen. Als Nächstes speichern Sie das SVG-Bild als png mit Sharp, damit Sie sehen können, wie SVG den Text zeichnet. Sobald dies erledigt ist, setzen Sie das SVG-Bild mit sammy.png zusammen.

Fügen Sie den hervorgehobenen Code hinzu, um das SVG-Bild als png mit Sharp zu speichern:

    ....
    const svgImage = `
    <svg width="${width}" height="${height}">
    ...
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp(svgBuffer).toFile("svg-image.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

Buffer.from() erstellt ein Buffer-Objekt aus dem SVG-Bild. Ein Puffer ist ein temporärer Speicherplatz im Speicher, der binäre Daten speichert.

Nachdem Sie das Pufferobjekt erstellt haben, erstellen Sie eine sharp-Instanz mit dem Pufferobjekt als Eingabe. Neben einem Bildpfad akzeptiert Sharp auch ein Puffer, Uint9Array oder Uint8ClampedArray.

Zuletzt speichern Sie das SVG-Bild im Projektverzeichnis als svg-image.png.

Hier ist der vollständige Code:

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp(svgBuffer).toFile("svg-image.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage()

Speichern Sie die Datei und beenden Sie sie, dann führen Sie Ihr Skript mit folgendem Befehl aus:

node addTextOnImage.js

sudo apt update
sudo apt install fontconfig

Öffnen Sie svg-image.png auf Ihrem lokalen Gerät. Sie sollten jetzt den Text Sammy the Shark mit einem transparenten Hintergrund sehen:

Nachdem Sie bestätigt haben, dass der SVG-Code den Text zeichnet, werden Sie die Textgrafiken auf sammy.png überlagern.

Fügen Sie den folgenden hervorgehobenen Code hinzu, um die SVG-Textgrafik auf das Bild sammy.png zu überlagern.

const sharp = require("sharp");

async function addTextOnImage() {
  try {
    const width = 750;
    const height = 483;
    const text = "Sammy the Shark";

    const svgImage = `
    <svg width="${width}" height="${height}">
      <style>
      .title { fill: #001; font-size: 70px; font-weight: bold;}
      </style>
      <text x="50%" y="50%" text-anchor="middle" class="title">${text}</text>
    </svg>
    `;
    const svgBuffer = Buffer.from(svgImage);
    const image = await sharp("sammy.png")
      .composite([
        {
          input: svgBuffer,
          top: 0,
          left: 0,
        },
      ])
      .toFile("sammy-text-overlay.png");
  } catch (error) {
    console.log(error);
  }
}

addTextOnImage();

Die Methode composite() liest das SVG-Bild aus der Variablen svgBuffer und positioniert es 0 Pixel von oben und 0 Pixel vom linken Rand des sammy.png. Als nächstes speichern Sie das überlagerte Bild als sammy-text-overlay.png.

Speichern Sie die Datei und schließen Sie sie. Führen Sie dann Ihr Programm mit folgendem Befehl aus:

node addTextOnImage.js

Öffnen Sie sammy-text-overlay.png auf Ihrem lokalen Gerät. Sie sollten den hinzugefügten Text über dem Bild sehen:

Sie haben nun die Methode composite() verwendet, um Text, der mit SVG erstellt wurde, auf ein anderes Bild hinzuzufügen.

Abschluss

In diesem Artikel haben Sie gelernt, wie Sie scharfe Methoden verwenden, um Bilder in Node.js zu verarbeiten. Zuerst haben Sie eine Instanz erstellt, um ein Bild zu lesen, und die metadata()-Methode verwendet, um die Bilddaten zu extrahieren. Anschließend haben Sie die resize()-Methode verwendet, um ein Bild zu skalieren. Danach haben Sie die format()-Methode verwendet, um den Bildtyp zu ändern und das Bild zu komprimieren. Als Nächstes haben Sie verschiedene scharfe Methoden verwendet, um ein Bild zu zuschneiden, in Graustufen umzuwandeln, zu drehen und zu verwischen. Schließlich haben Sie die composite()-Methode verwendet, um ein Bild zusammenzusetzen und Text auf einem Bild hinzuzufügen.

Für weitere Einblicke in zusätzliche scharfe Methoden besuchen Sie die Sharp-Dokumentation. Wenn Sie weiterhin Node.js lernen möchten, sehen Sie sich die Anleitung zur Programmierung in Node.js-Serie an.