Heim  >  Artikel  >  Web-Frontend  >  So konvertieren Sie Fotos mit Nodejs in Pixmaps

So konvertieren Sie Fotos mit Nodejs in Pixmaps

PHPz
PHPzOriginal
2023-04-17 16:45:021098Durchsuche

Mit der kontinuierlichen Weiterentwicklung der Technologie und der Entwicklung des Internets wird die Nachfrage der Menschen nach Bildern und Videos im Internet immer größer. Für jeden Programmierer müssen wir einige grundlegende Fähigkeiten beherrschen, beispielsweise die Fotokonvertierung. Lassen Sie uns heute darüber sprechen, wie Sie Fotos mit Nodejs in Pixelbilder konvertieren.

Schauen wir uns zunächst einmal an, was ein Pixelbild ist. Ein Pixelbild ist ein aus Pixeln zusammengesetztes Bild, was bedeutet, dass ein Pixelbild eine Möglichkeit ist, ein Bild auf einem Computer darzustellen. Es besteht aus der Farbe und Position jedes Pixels. Daher können wir die Pixelkarte ändern, indem wir die Farbe und Position des Pixels manipulieren.

In Nodejs können wir die Pngjs-Bibliothek verwenden, um Pixelbilder zu bearbeiten. Pngjs ist ein Streaming-PNG-Encoder/Decoder, der es Ihnen ermöglicht, PNG-Bilder mit Nodejs zu kodieren und zu dekodieren, was Entwicklern die Arbeit mit JPEG und GIF erleichtert.

Zuerst müssen wir das fs-Modul (Dateisystem) von Nodejs verwenden, um das Foto zu lesen, und dann die PNGjs-Bibliothek verwenden, um das Bild in eine PNG-Datei zu konvertieren. Der Beispielcode lautet wie folgt:

const fs = require('fs');
const PNG = require('pngjs').PNG;

const input = fs.createReadStream('image.jpg');
const output = fs.createWriteStream('image.png');

input.pipe(new PNG()).on('parsed', function() {
  this.pack().pipe(output);
});

Im obigen Code verwenden wir die Methode „createReadStream“, um das Bild zu lesen, und verwenden dann die Methode „createWriteStream“, um die PNG-Datei zu speichern. Anschließend verwenden wir die neue PNG()-Methode, um den Bildstream in eine PNG-Datei zu konvertieren. Nachdem die Bildanalyse abgeschlossen ist, erstellen wir einen Ausgabedateistream und speichern ihn auf der Festplatte.

Als nächstes müssen wir das Bild in ein Pixelbild umwandeln. In Pngjs können wir die Methode getPixel verwenden, um die Farbe des Pixels abzurufen. Der Beispielcode lautet wie folgt:

const fs = require('fs');
const PNG = require('pngjs').PNG;

const input = fs.createReadStream('image.png');

input.pipe(new PNG()).on('parsed', function() {
  for (let y = 0; y < this.height; y++) {
    for (let x = 0; x < this.width; x++) {
      const idx = (this.width * y + x) << 2;

      // get the pixel color (R, G, B, A)
      const red = this.data[idx];
      const green = this.data[idx + 1];
      const blue = this.data[idx + 2];
      const alpha = this.data[idx + 3];

      // convert pixel color to another format
      // ...
    }
  }
});

Im obigen Code verwenden wir die getPixel-Methode, um die Farbe jedes Pixels abzurufen, und speichern sie dann im RGB-Farbraum (Rot, Grün und Blau). Wir können jede Operation an der Farbe von Pixeln im RGB-Raum durchführen, z. B. Helligkeit, Kontrast, Farbton, Sättigung usw. anpassen.

Schließlich verwenden wir die Methode pack() in der PNGjs-Bibliothek, um die Pixel in ein PNG-Bild neu zu packen, und verwenden die Methode createWriteStream, um es auf der Festplatte zu speichern. Der Beispielcode lautet wie folgt:

const fs = require('fs');
const PNG = require('pngjs').PNG;

const input = fs.createReadStream('image.png');
const output = fs.createWriteStream('output.png');

input.pipe(new PNG()).on('parsed', function() {
  for (let y = 0; y < this.height; y++) {
    for (let x = 0; x < this.width; x++) {
      const idx = (this.width * y + x) << 2;

      // get the pixel color (R, G, B, A)
      const red = this.data[idx];
      const green = this.data[idx + 1];
      const blue = this.data[idx + 2];
      const alpha = this.data[idx + 3];

      // convert pixel color to another format
      // ...

      // set the pixel color (R, G, B, A)
      this.data[idx] = red;
      this.data[idx + 1] = green;
      this.data[idx + 2] = blue;
      this.data[idx + 3] = alpha;
    }
  }

  this.pack().pipe(output);
});

Im obigen Code speichern wir die Farbe der Pixel erneut in den Daten und packen sie mithilfe der pack()-Methode neu in das PNG-Format. Abschließend speichern wir es auf der Festplatte. Jetzt haben wir Fotos erfolgreich in Pixelkunst umgewandelt!

Zusammenfassend haben wir das fs-Modul von Nodejs verwendet, um die Bilddaten zu lesen, und dann die PNGjs-Bibliothek verwendet, um sie in das PNG-Format zu konvertieren. Als nächstes verwenden wir die getPixel-Methode, um die Farbe jedes Pixels zu ermitteln, sie zu bearbeiten und sie erneut in den Daten zu speichern. Abschließend verwenden wir die Methode pack(), um die Daten neu zu packen und mit dem fs-Modul auf der Festplatte zu speichern.

Durch die Einleitung dieses Artikels können wir lernen, wie man Nodejs zum Konvertieren von Fotos in Pixelbilder verwendet, und auch die grundlegende Verwendung der Pngjs-Bibliothek verstehen. Unabhängig davon, ob Sie eine Nodejs-Anwendung oder etwas anderes entwickeln, helfen Ihnen diese Tipps dabei, Bilder besser zu manipulieren und zu manipulieren.

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie Fotos mit Nodejs in Pixmaps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn