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

MySQL-Einfügungsproblem bei JSON

MySQL 5.7.8 und höher unterstützt nun einen nativ...

Beispielcode, der gängige Grafikeffekte in CSS-Stilen zeigt

Lassen Sie mich kurz einige gängige Grundgrafiken...

So verwenden Sie das Videowiedergabe-Plugin DPlayer.js

Das Videoplayer-Plugin DPlayer.js ist einfach zu ...

Fallstudie zum Unterschied zwischen JavaScript parseInt() und Number()

Lernziele: Die beiden Funktionen parseInt() und N...

Erläuterung der HTTPS-Prinzipien

Da die Kosten für die Erstellung von HTTPS-Websit...

JavaScript implementiert einfache Datumseffekte

Der spezifische Code der JavaScript-Datumseffekte...

Implementierung der kollaborativen Nutzung von React-Komponenten

Inhaltsverzeichnis Verschachtelung Kommunikation ...

Detaillierte Erklärung zu Drag-Time und Drag-Case in JavaScript

Inhaltsverzeichnis DragEvent-Schnittstelle Übersi...

Anweisungen zur Verwendung des HTML-Tags dl dt dd

Grundaufbau: Code kopieren Der Code lautet wie fol...

CentOS7-Upgrade des Kernels kernel5.0 Version

Upgrade-Prozess: Ursprüngliches System: CentOS7.3...

Lösen Sie das Problem der Groß- und Kleinschreibung der Linux+Apache-Server-URL

Ich bin heute auf ein Problem gestoßen. Beim Eing...