Bilder mit scharfer Schärfe in Node.js bearbeiten

Bilder sind ein wichtiger Bestandteil der meisten Anwendungen, die benutzergenerierte Inhalte verarbeiten. Zu große oder nicht optimierte Bilddateien können sich jedoch negativ auf die Leistung und das Benutzererlebnis auswirken. Eine robuste Bildverarbeitungslösung kann für das UGC-Management von unschätzbarem Wert sein.

Sharp ist ein leistungsstarkes Bildverarbeitungsmodul für Node.js. Dieses Modul unterstützt das UGC-Management, indem es eine einfache Lösung zum Lesen, Verbessern und Speichern von Bilddateien bietet. Sharp komprimiert Bilder schneller als die meisten anderen Node.js-Module, wie ImageMagick, Jimp oder Squoosh, und liefert qualitativ hochwertige Ergebnisse.

Sharp wandelt große gängige Bildformate in kleinere, webfreundliche Bilder um. Sharp kann die Bildformate JPEG, PNG, WebP, AVIF, TIFF, GIF und SVG lesen. Dieses Modul kann Bilder in den Formaten JPEG, PNG, WebP, AVIF und TIFF sowie unkomprimierte Pixelrohdaten erzeugen.

In diesem Tutorial analysieren und modifizieren wir ein Bild mit der Sharp Node.js-Bibliothek. Einzige Voraussetzung für dieses Tutorial ist ein mit Node.js und npm eingerichtetes System.

Wir werden Folgendes behandeln:

Einrichten eines scharfen Bildprojekts

Um ein scharfes Bildprojekt einzurichten, erstellen Sie zunächst ein neues Verzeichnis im Terminal des Editors:

mkdir sharp_project

Als nächstes migrieren Sie in ein neues Verzeichnis:

cd sharp_project

Initialisieren Sie nun npm:

npm init -y

Als nächstes installieren Sie scharf:

npm install sharp

Öffnen Sie nun das Verzeichnis mit Ihrer bevorzugten IDE. In diesem Tutorial verwenden wir VS Code.

code .

Wir verwenden die folgenden beiden Bilder:

Konvertieren eines Bilds in Graustufen

Um ein Bild in Graustufen zu konvertieren, erstellen Sie eine neue Datei im Terminal des Editors:

touch _grayscale.js

Kopieren Sie als nächstes den folgenden Code:

const sharp = require('sharp')

const convertTograyscale = () => {
  sharp('./images/robo.jpg')
  .grayscale() // or .greyscale()
  .toFile(__dirname + '/processed_images/grayscale_robo.jpg')
}

convertTograyscale()

In diesem Beispiel erstellen wir zunächst eine Instanz des sharp Modul. Wir benutzen das sharp() Instanz innerhalb der require() Funktionsumfang, um den Pfad zu unserem Bild zu lesen.

Zur Durchführung der Verarbeitungsaufgabe definieren wir die convertTograyscale() Funktion. Dann verketten wir die sharp Modul’s grayscale() Methode zum sharp -Instanz, um das Aussehen des Bildes zu ändern. Wir speichern das geänderte Bild im processed_images Ordner mit dem toFile() Methode.

Nun führen wir den Dateicode auf dem Terminal aus:

node _grayscale.js

Das neu erstellte Graustufenbild, grayscale_robo.jpg, finden Sie im processed_image Mappe:

Ein Bild färben

Um ein Bild zu färben, erstellen Sie zunächst eine neue Datei:

touch _tint.js

Kopieren Sie nun den folgenden Code:

const sharp = require('sharp')

const tintImage = () => {
  sharp ('./images/robo.jpg')
  .tint({r: 255, g: 0, b: 0})
  .toFile(__dirname + '/processed_images/tint_robo.jpg')
}

tintImage()

Wir benutzen das tint() Methode der sharp Modul, um die Farbe des Bildes zu ändern. Mit dieser Methode können wir die Intensität der Rot-, Grün- und Blau-Chroma-Werte angeben. Die Skala für diese Methode beträgt 0 bis 255, wobei höhere Chroma-Werte zu einem gesättigteren Farbton führen. In diesem Beispiel verwenden wir den Maximalwert von 255 für den roten Parameter: r.

Speichern Sie die Datei und führen Sie den folgenden Befehl aus:

node _tint.js

Hier ist das neu erstellte getönte Bild, tint_robo.jpg:

Um die Bildmetadaten zu extrahieren, erstellen Sie zunächst eine neue Datei:

touch _metadata.js

Kopieren Sie als nächstes den folgenden Code:

const sharp = require('sharp')

const imageMetadata = () => {
  const metadata = sharp('./images/robo.jpg').metadata()

  console.log(metadata)
}

imageMetadata()

Wir benutzen das metadata() Funktion zum Extrahieren der Bildmetadaten. Wir retten die metadata variabel und loggen Sie sich mit . auf dem Terminal ein console.log().

Nun führen wir den folgenden Befehl aus:

node _metadata.js

Dies erzeugt die folgende Ausgabe:

{
  format: 'jpeg',
  width: 1920,
  height: 1080,
  space: 'srgb',
  channels: 3,
  depth: 'uchar',
  density: 72,
  chromaSubsampling: '4:2:0',
  isProgressive: false,
  hasProfile: false,
  hasAlpha: false,
  orientation: 1,
  exif: <Buffer 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 05 01 12 00 03 00 00 00 01 00 01 00 00 01 1a 00 05 00 00 00 01 00 00 00 4a 01 1b 00 05 00 00 00 01 00 00 ... 88 more bytes>,
  iptc: <Buffer 50 68 6f 74 6f 73 68 6f 70 20 33 2e 30 00 38 42 49 4d 04 04 00 00 00 00 00 00 38 42 49 4d 04 25 00 00 00 00 00 10 d4 1d 8c d9 8f 00 b2 04 e9 80 09 98 ... 4 more bytes>
}

Ein Bild drehen

Um ein Bild zu drehen, erstellen Sie zunächst eine neue Datei:

touch _rotate.js

Fügen Sie nun den folgenden Code hinzu:

const sharp = require('sharp');

const rotateImage = () => {
  sharp('./images/robo.jpg')
  .rotate(250)
  .toFile(__dirname + '/processed_images/rotate_robo.jpg')
}

rotateImage()

In diesem Beispiel ist die rotateImage() Die Funktion liest das Bild und gibt es um 250 Grad gedreht zurück. Wir benutzen das rotate() -Methode innerhalb des Funktionsumfangs, die an die sharp Modul. Der rotate() -Methode nimmt den Drehwinkel als Eingabe und speichert ihn als neues Bild: rotate_robo.jpg.

Führen Sie nun den Dateicode aus:

node _rotate.js

Hier das gedrehte Bild:

Größe eines Bildes ändern

Um die Größe eines Bildes zu ändern, erstellen Sie zuerst eine neue Datei:

touch _resize.js

Kopieren Sie als nächstes den folgenden Code:

const sharp = require('sharp')

const resizeImage = () => {
  const resize = sharp('./images/robo.jpg')
  .resize(350, 260)
  .toFile(__dirname + '/processed_images/resize_robo.jpg')

  console.log(resize)
}

resizeImage()

Um die Größe des Bildes zu ändern, verketten wir zuerst die resize() Funktion zum sharp Beispiel. Dann speichern wir es im processed_images Mappe. Dieses Verfahren ändert die Gesamtabmessungen, ohne das Bild zu beschneiden oder zu verzerren.

Nun führen wir den folgenden Befehl aus:

node _resize.js

Dies erzeugt die folgende Ausgabe:

{
  format: 'jpeg',
  width: 350,
  height: 260,
  channels: 3,
  premultiplied: false,
  size: 12042
}

Ein Bild formatieren

const formatImage = () => {
  sharp('./images/robo.jpg')
  .toFormat('png', {palette: true})
  .toFile(__dirname + '/processed_images/format_robo.png')
}

formatImage()

Um es zu ändern sharp Dateiformat der Instanz von JPEG zu PNG verwenden wir das format() Methode. Wir geben auch die format() -Methode eine Option zum Komprimieren des Bildes.

Jeder formatImage() akzeptiert ein separates Objekt mit verschiedenen Eigenschaften. Der palette -Eigenschaft ist beispielsweise nur für PNG-Bilder gültig. Nur JPEG-Bilder können die mozjpeg -Eigenschaft, und nur WebP-Bilder können die lossless Eigentum. Der toFile() -Methode wird verwendet, um das komprimierte Bild im processed_images Mappe.

Ein Bild zuschneiden

Um ein Bild zuzuschneiden, erstellen Sie zunächst eine neue Datei:

touch _crop.js

Kopieren Sie als nächstes den folgenden Code:

const sharp = require('sharp')

const cropImage = () => {
  sharp('./images/robo.jpg')
  .extract({left: 740, width: 500, height: 300, top: 340})
  .toFile(__dirname + '/processed_images/crop_robo.png')
}

cropImage()

Um das Bild zuzuschneiden, verketten wir zuerst die extract() Funktion zum sharp Beispiel. Dann speichern wir es im processed_images Mappe. Mit diesem Verfahren können wir Folgendes festlegen: den zu beschneidenden horizontalen Bereich links vom Bild (left), das gewünschte Bild width, das gewünschte Bild height, und der zu beschneidende vertikale Raum über dem Bild (top).

In diesem Beispiel generieren wir einen Zuschneiderahmen mit einer Breite von 500 Pixeln und einer Höhe von 300 Pixeln, der 740 Pixel vom linken Bildrand und 340 Pixel vom oberen Bildrand positioniert ist. Mit dem extract Methode wird jeder Teil des Bildes, der in die Box passt, beibehalten. Alles außerhalb der Box wird entfernt.

Kopieren Sie nun den folgenden Code:

node _crop.js

Hier ist das kopierte Bild:

Zusammengesetztes Bild erstellen

Um zwei oder mehr Bilder zu kombinieren, erstellen Sie zuerst eine neue Datei:

touch _composite.js

Kopieren Sie als nächstes den folgenden Code:

const sharp = require('sharp')

const compositeImage = () => {
  sharp ('./images/fall.jpg')
  .composite([{input: './images/robo.jpg', left: 900, top: 750}])
  .toFile(__dirname + '/processed_images/composite_robo.jpg')
}

compositeImage()

Um ein zusammengesetztes Bild zu erstellen, verketten wir zuerst die composite() Funktion zum sharp Beispiel. Wir fügen auch eine neue Bilddatei hinzu, fall.jpg, zum sharp Modul. In diesem Beispiel, fall.jpg ist das verarbeitete Bild (oder Hintergrundbild).

Die scharfen Module composite() -Methode verwendet ein Array als Eingabe. Das zusammenzusetzende Bild, robo.jpg, wird von einem einzelnen Objekt im Array gelesen. Es ist wichtig zu beachten, dass das zusammengesetzte Bild kleinere Abmessungen haben muss als das verarbeitete Bild. Wir können die folgenden Objektattribute angeben:

• input: das Bild, das über dem verarbeiteten Bild platziert wird
• top: die vertikale Position des über dem verarbeiteten Bild zusammengesetzten Bildes
• left: die horizontale Position des über dem verarbeiteten Bild zusammengesetzten Bildes

Speichern Sie das resultierende Bild und führen Sie den folgenden Befehl aus:

node _composite.js

Hier ist das zusammengesetzte Bild:

Ein Bild verwischen

Um ein Bild unscharf zu machen, erstellen Sie zunächst eine neue Datei:

touch _blur.js

Als nächstes fügen Sie den folgenden Code hinzu:

const sharp = require('sharp')

const blurImage = () => {
  sharp('./images/robo.jpg')
  .blur(9)
  .toFile(__dirname + '/processed_images/blur_robo.jpg')
}

blurImage()

In unserem Beispiel verwenden wir die blur() Methode der sharp Modul zum Anwenden einer Gaußschen Unschärfe auf das Bild. Diese Technik verwendet die Gaußsche Funktion, um den Pixeln am Rand des Bildes weniger Gewicht zu verleihen, was zu weniger Bilddetails und Bildrauschen führt. Für dieses Beispiel ist die Gaußsche .blur() Sigma ist 9.

Speichern Sie die Datei und führen Sie den folgenden Befehl aus:

node _blur.js

Hier ist das unscharfe Bild:

Schärfen eines Bildes

Um ein Bild zu schärfen, erstellen Sie zunächst eine neue Datei:

touch _sharpen.js

Als nächstes fügen Sie den folgenden Code hinzu:

const sharp = require('sharp')

const sharpenImage = () => {
  sharp ('./images/robo.jpg')
  .sharpen(13)
  .toFile(__dirname + '/processed_images/sharpen_robo.jpg')
}

sharpenImage()

Um das Bild zu schärfen, verwenden wir die sharpen() Funktion. Wenn keine Parameter angegeben werden, erzeugt diese Technik eine schnelle, moderat geschärfte Version des Originalbilds. Wenn jedoch ein Parameter angegeben wird, führt diese Funktion eine langsamere und präzisere Schärfung durch. Für dieses Beispiel ist die sharpen() Sigma ist 13.

Kopieren Sie nun den folgenden Code:

node _sharpen.js

Hier das geschärfte Bild:

Spiegeln eines Bildes

Um ein Bild zu spiegeln (oder horizontal umzukehren), erstellen Sie zunächst eine neue Datei:

touch _flip.js

Kopieren Sie als nächstes den folgenden Code:

const sharp = require('sharp')
const flipImage = async () => {
  await sharp('./images/robo.jpg')
  .flip()
  .toFile(__dirname + '/processed_images/flip_robo.jpg');
}
flipImage()

Wir ketten die flip() Methode zum sharp Instanz, um das Bild über die x-Achse zu spiegeln.

Führen Sie nun das folgende Programm aus:

node _flip.js

Hier ist das gespiegelte Bild:

Flop ein Bild

Um ein Bild zu floppen (oder vertikal umzukehren), erstellen Sie zunächst eine neue Datei:

touch _flop.js

Als nächstes fügen Sie den folgenden Code hinzu:

const sharp = require('sharp')
const flopImage = async () => {
  await sharp('./images/robo.jpg')
  .flop()
  .toFile(__dirname + '/processed_images/flop_robo.jpg');
}
flopImage()

Wir ketten die flop() Methode zum sharp Instanz zu flop das Bild über der y-Achse.

Führen Sie nun den folgenden Befehl aus:

node _flop.js

Hier ist das gefloppte Bild:

Hinzufügen von Text zu einem Bild

Sharp verfügt derzeit nicht über eine Methode zum Hinzufügen von Text zu einem Bild. Als Workaround können wir jedoch Text mit SVG zeichnen und dann die composite() -Methode, um das Textbild zum Originalbild hinzuzufügen.

Beginnen Sie mit dem Erstellen einer neuen Datei:

touch _text.js

Kopieren Sie als nächstes den folgenden Code:

const sharp = require('sharp');

const addText = () => {
  const width = 900;
  const height = 500;
  const text = "E.T, go home";

  const svgText = `
  <svg width="${width}" height="${height}">
    <style>
      .title { fill: red; font-size: 85px}
    </style>
    <text x="45%" y="40%" text-anchor="middle" class="title">${text}</text>
  </svg>`

  const svgBuffer = Buffer.from(svgText);

  sharp ('./images/robo.jpg')
  .composite([{input: svgBuffer, left: 1150, top: 90}])
  .toFile(__dirname + '/processed_images/text_robo.jpg')
}

addText()

Für unseren Workaround verwenden wir ein addText() Funktion mit vier Variablen: der gewünschte Textbereich width, der gewünschte Textbereich height, das text Zeichenfolge, die mit SVG gezeichnet wird (in diesem Beispiel E.T, go home) und einen durchsichtigen Behälter, svgText, das den Text enthält.

Das SVG-Element hat zwei untergeordnete Elemente: style und text. Der style element verwendet CSS, um das Erscheinungsbild der text. Der fill und font-size Eigenschaften ändern die Farbe bzw. die Größe des Textes.

Der text Element hat vier Attribute: horizontale Position (x), vertikale Position (y), Ausrichtung (text-anchor), und class. Dieses letzte Attribut, class, gibt an, wie die CSS-Stile auf die text Element. ${text} interpoliert die Zeichenfolge E.T, go home aus der Variablen text.

Als nächstes verwenden wir die Buffer.from() Funktion zum Erstellen eines Buffer-Objekts aus dem svgText Variable und speichere sie dann in der svgBuffer Variable.

Um den Text zum Bild hinzuzufügen, verketten wir die composite() Funktion zum sharp Instanz und verwenden Sie die svgText variabel als Eingabe. In diesem Beispiel, robo.jpg ist das verarbeitete Bild (oder Hintergrundbild).

Führen Sie nun den folgenden Befehl aus:

node _text.js

Hier das Bild mit Text:

Fazit

In diesem Tutorial haben wir untersucht, wie Sie die Sharp-Bibliothek zum Verarbeiten von Bildern in Node.js verwenden. Wir haben die benutzt grayscale(), tint(), rotate(), resize(), crop(), blur(), sharpen(), flip(), und flop() Methoden, um das Aussehen, den Stil und die Form des Bildes zu ändern. Wir haben die Bildmetadaten mit dem extrahiert metadata() Methode. Wir kombinierten zwei Bilder mit dem composite() Methode. Wir haben auch die genutzt composite()-Methode zum Hinzufügen von Text zum Bild mit einer SVG-Umgehung. Zuletzt haben wir die format() -Methode, um den Bildtyp zu ändern und das Bild zu komprimieren.

Um die Effizienz und Leistung Ihrer Node.js-Anwendung noch weiter zu verbessern, finden Sie hier einige zusätzliche Empfehlungen.