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

Implementierung der Nginx-Konfiguration HTTPS-Sicherheitsauthentifizierung

1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...

Axios storniert Anfragen und vermeidet doppelte Anfragen

Inhaltsverzeichnis Herkunft Status Quo Anfrage ab...

Beispiel zur Erläuterung der Größe einer MySQL-Statistiktabelle

Das Zählen der Größe jeder Tabelle in jeder Daten...

Welche Codes sollte ich beherrschen, wenn ich Webdesign lerne?

In diesem Artikel werden einige der Techniken ausf...

Lösung für den MySQL-Fehlercode 1064

Wenn die Wörter in der SQL-Anweisung mit den Schl...

W3C Tutorial (1): W3C verstehen

Das W3C, eine 1994 gegründete Organisation, zielt...

Docker CP kopiert Dateien und gibt den Container ein

Geben Sie den laufenden Container ein # Geben Sie...

Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben

HTML5 fügt weitere semantische Tags hinzu, wie et...

JS-Prinzip der asynchronen Ausführung und Rückrufdetails

1. JS-Prinzip der asynchronen Ausführung Wir wiss...

Verwendung von Umgebungsvariablen in Docker und Lösungen für häufige Probleme

Vorwort Docker kann Umgebungsvariablen für Contai...