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

Eine kurze Einführung in Linux-Leistungsüberwachungsbefehle kostenlos

Wie können wir den Fehler lokalisieren, wenn im S...

Bringen Sie Ihnen bei, wie Sie coole Barcode-Effekte erstellen

Stellungnahme : In diesem Artikel erfahren Sie, w...

MySQL-Fall bei der Verwendungsbeispielanalyse

Zuerst erstellen wir die Datenbanktabelle: Tabell...

Beispielcode zum Hervorheben von Suchbegriffen im WeChat-Miniprogramm

1. Einleitung Wenn Sie im Projekt auf eine Anford...

Detaillierte Schritte zum Bereitstellen von Microsoft SQL Server mit Docker

Inhaltsverzeichnis 1 Hintergrund 2 Erstellen Sie ...

Detailliertes Tutorial zum Ausführen mehrerer Springboot mit Docker

Docker führt mehrere Springboot Erstens: Port-Map...

13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen

Inhaltsverzeichnis 1. Holen Sie sich einen zufäll...

Grafisches Tutorial zu MySQL-Downloads und Installationsdetails

1. Um die MySQL-Datenbank herunterzuladen, besuch...

Allgemeiner HTML-Seitenstil (empfohlen)

Wie unten dargestellt: XML/HTML-CodeInhalt in die...

So installieren Sie Django in einer virtuellen Umgebung unter Ubuntu

Führen Sie die folgenden Vorgänge im Ubuntu-Befeh...