So verwenden Sie Node.js, um festzustellen, ob ein PNG-Bild transparente Pixel hat

So verwenden Sie Node.js, um festzustellen, ob ein PNG-Bild transparente Pixel hat

Hintergrund

PNG-Bilder benötigen mehr Speicherplatz als JPG-Bilder, die Qualität von PNG-Bildern ist jedoch deutlich besser. Manchmal muss die Bildqualität nicht besonders gut sein, aber um die Paketgröße zu reduzieren, sind einige Optimierungen erforderlich, z. B. das Komprimieren des Bildes und die Konvertierung von PNG-Bildern ohne transparente Pixel in das JPG-Format. In diesem Artikel geht es hauptsächlich darum, wie man mit Node.js PNG-Bilder ohne transparente Pixel erkennt und in JPG-Bilder umwandelt.

Code

Direkt auf dem Code

Canvas von „Canvas“ importieren;
importiere fs von „fs“;

/**
 * Bestimmen Sie, ob das PNG-Bild transparente Pixel enthält*
 * @param {*} pngPath PNG-Bildpfad * @param {number} [limit=255] transparente Pixelgrenze, standardmäßig werden weniger als 255 als transparente Pixel betrachtet * @param {boolean} [isToJpg=false] wenn keine transparenten Pixel vorhanden sind, ob in ein JPG-Bild konvertiert werden soll * @returns
 */
Funktion hatOpacity(pngPath, Limit = 255, ist zu Jpg = falsch) {
  // Den Bildpuffer abrufen
  const buffer = fs.readFileSync(pngPath);

  // Die Breite des Bildes wird im 17. bis 20. Byte des Puffers gespeichert const width = buffer.readUInt32BE(16);
  // Die Breite des Bildes wird im 21. bis 24. Byte des Puffers gespeichert const height = buffer.readUInt32BE(20);

  //Eine Leinwand erstellen const pngCanvas = canvas.createCanvas(width, height);
  // Pinsel abrufen const context = pngCanvas.getContext('2d');
  // Ein Bild erstellen const img = new canvas.Image();
  // Bild aufzeichnen img.src = buffer;
  // Verwenden Sie den Pinsel, um das Bild auf die Leinwand zu zeichnen context.drawImage(img, 0, 0, width, height);

  // Holen Sie die Pixeldaten des PNG-Bildes let res = context.getImageData(0, 0, width, height);
  Lassen Sie imgData = res.data;
  // Jedes Pixel nimmt 4 Bytes ein, berechne, wie viele Pixel es insgesamt gibt // [r, g, b, a]
  sei piexCount = imgData.length / 4;

  // Wurden transparente Pixel gefunden? let isOpacity = false;

  für (lass i = 0; i < piexCount; i++) {
    // Durchlaufe jedes Pixel und finde den transparenten Kanal let opacity = imgData[i * 4 + 3];
    wenn (Deckkraft < Grenze) {
        // Wenn es kleiner als der Grenzwert ist, gibt es transparente Pixel und es wird beendet. isOpacity = true;
      brechen;
    }
  }

  // Wenn keine transparenten Pixel vorhanden sind und isToJpg wahr ist, konvertiere das Bild in das JPG-Format if (!isOpacity && isToJpg) {
    const out = fs.createWriteStream(pngPath.split('.')[0] + '.jpg');
    pngCanvas.createJPEGStream().pipe(out);
    out.on('finish', () => console.log(pngPath, 'Erfolgreich in JPG konvertiert'));
  }

  // zurückgeben return isOpacity;
}

console.log(hasOpacity('hh.png', 254, true));
console.log(hasOpacity('jj.png'));

Prinzip:

Canvas verwendet vier Bytes zum Speichern von Pixeln, [r, g, b, a], die jeweils den Rotkanal, den Grünkanal, den Blaukanal und den transparenten Kanal darstellen. Jedes Byte besteht aus 8 Bits, die Daten jedes Kanals liegen also zwischen 0 und 255. Für den transparenten Kanal bedeutet 255 völlig undurchsichtig und 0 völlig transparent. Wir verwenden den Puffer und die Leinwand von Node.js, um das PNG-Bild in Pixeldaten umzuwandeln, und können dann durch Durchlaufen jedes transparenten Kanals herausfinden, ob das PNG-Bild transparente Pixel hat.

zweifeln? Warum gibt es einen Grenzparameter?

Dies liegt daran, dass in tatsächlichen Anwendungen eine kleine Anzahl von 254 und 253 transparenten Pixeln vorhanden sein kann, die wie vollständig undurchsichtige Pixel aussehen und daher auch als nicht transparente Pixel behandelt werden. Dies sollte entsprechend den für Sie akzeptablen Grenzen weitergegeben werden.

Beispielbilder

Mit transparenten Pixeln

Keine transparenten Pixel

Leinwand

Weitere Informationen zu Canvas finden Sie unter www.npmjs.com/package/canvas.

Zusammenfassen

Damit ist dieser Artikel zur Verwendung von Node.js zur Ermittlung, ob ein PNG-Bild transparente Pixel enthält, abgeschlossen. Weitere Informationen zur Verwendung von Node.js zur Ermittlung, ob ein PNG-Bild transparente Pixel enthält, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Tutorial zur Installation von Odoo14 aus dem Quellcode unter Ubuntu 18.04

>>:  Die Eisernen Gesetze der MySQL-Datenbank (Zusammenfassung)

Artikel empfehlen

Lösung für „Keine Eingabedatei angegeben“ in nginx+php

Heute ist in meiner lokalen Entwicklungsumgebung ...

Zusammenfassung der Methoden zum Schreiben von Urteilsaussagen in MySQL

So schreiben Sie Urteilsaussagen in MySQL: Method...

Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME

Verwenden Sie die FRAME-Eigenschaft, um den Stilt...

Die Frontend-Entwicklung muss jeden Tag lernen, HTML-Tags zu verstehen (1)

2.1 Semantisierung sorgt dafür, dass Ihre Webseit...

Warum wird deine Like-Aussage nicht indexiert?

Vorwort Dieser Artikel zielt darauf ab, die langw...

JavaScript zur Implementierung der Webversion des Gobang-Spiels

In diesem Artikel wird der spezifische Code für J...

Beispiel für die Kompilierung von LNMP im Docker-Container

Inhaltsverzeichnis 1. Projektbeschreibung 2. Ngin...

Flex-Anordnung in CSS darstellen (Layouttool)

In Bezug auf die Anzeige: flexibles Layout: Manch...