HintergrundPNG-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. CodeDirekt 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. BeispielbilderMit transparenten Pixeln Keine transparenten Pixel LeinwandWeitere Informationen zu Canvas finden Sie unter www.npmjs.com/package/canvas. ZusammenfassenDamit 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)
1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...
Notieren Sie einige der Orte, an denen Sie Zeit v...
Schritt 1: Geben Sie das Verzeichnis ein: cd /etc...
Vorwort Beim Betrieb und der Verwaltung von Linux...
Inhaltsverzeichnis Herkunft Status Quo Anfrage ab...
Das Zählen der Größe jeder Tabelle in jeder Daten...
In diesem Artikel werden einige der Techniken ausf...
Wenn die Wörter in der SQL-Anweisung mit den Schl...
Yum (vollständiger Name Yellow Dog Updater, Modif...
1. px px ist die Abkürzung für Pixel, eine relati...
Das W3C, eine 1994 gegründete Organisation, zielt...
Geben Sie den laufenden Container ein # Geben Sie...
HTML5 fügt weitere semantische Tags hinzu, wie et...
1. JS-Prinzip der asynchronen Ausführung Wir wiss...
Vorwort Docker kann Umgebungsvariablen für Contai...