如何使用Node.js判斷png圖片是否存在透明像素
背景
png格式的圖片存儲空間會比jpg格式的圖片大,但是png圖片的質(zhì)量明顯更好。有時候并不需要圖片的質(zhì)量非常的好,但是為了減少包體,需要做一些優(yōu)化,比如壓縮圖片,把沒有帶透明像素的png圖片轉(zhuǎn)化成jpg格式的圖片。這片文章主要來講講怎么利用Node.js來檢測沒有帶透明像素的png圖片,以及如何把它轉(zhuǎn)化成jpg圖片。
代碼
直接上代碼
import canvas from 'canvas';
import fs from 'fs';
/**
* 判斷png圖片是否存在透明像素
*
* @param {*} pngPath png圖片路徑
* @param {number} [limit=255] 透明像素點限度,默認小與255視為透明像素
* @param {boolean} [isToJpg=false] 如果沒有透明像素是否轉(zhuǎn)化為jpg圖片
* @returns
*/
function hasOpacity(pngPath, limit = 255, isToJpg = false) {
// 獲取圖片的buffer
const buffer = fs.readFileSync(pngPath);
// 圖片的寬度存在buffer的第17到20個字節(jié)
const width = buffer.readUInt32BE(16);
// 圖片的寬度存在buffer的第21到24個字節(jié)
const height = buffer.readUInt32BE(20);
// 創(chuàng)建一個畫布
const pngCanvas = canvas.createCanvas(width, height);
// 拿到畫筆
const context = pngCanvas.getContext('2d');
// 創(chuàng)建一張圖片
const img = new canvas.Image();
// 記載圖片
img.src = buffer;
// 使用畫筆把圖片畫在畫布上
context.drawImage(img, 0, 0, width, height);
// 獲取png圖片的數(shù)據(jù)的像素數(shù)據(jù)
let res = context.getImageData(0, 0, width, height);
let imgData = res.data;
// 每個像素占用4個字節(jié),計算出一共有多少像素
// [r, g, b, a]
let piexCount = imgData.length / 4;
// 是否已經(jīng)找到透明像素
let isOpacity = false;
for (let i = 0; i < piexCount; i++) {
// 遍歷每個像素點,找透明通道
let opacity = imgData[i * 4 + 3];
if (opacity < limit) {
// 如果小于limit,則存在透明像素,退出
isOpacity = true;
break;
}
}
// 如果不存在透明像素且isToJpg為true,則轉(zhuǎn)化為jpg格式的圖拍呢
if (!isOpacity && isToJpg) {
const out = fs.createWriteStream(pngPath.split('.')[0] + '.jpg');
pngCanvas.createJPEGStream().pipe(out);
out.on('finish', () => console.log(pngPath, '轉(zhuǎn)成jpg成功'));
}
// 返回
return isOpacity;
}
console.log(hasOpacity('hh.png', 254, true));
console.log(hasOpacity('jj.png'));
原理:
canvas采用四個字節(jié)存放像素,[r, g, b, a],分別代表紅色通道,綠色通道,藍色通道,透明通道。每個字節(jié)是8位,所以每個通道的數(shù)據(jù)是0~255之間,就透明通道而言,255表示完全不透明,0表示完全透明。我們利用Node.js的buffer和canvas把png圖片轉(zhuǎn)化成一個個像素點的數(shù)據(jù),然后通過遍歷每個透明通道,就可以找到png圖片是否帶有透明像素。
疑問?為什么有個limit參數(shù)?
這是因為在實際應(yīng)用中,有可能存在少量254、253的透明通過,這些看起來就跟完全不透明的像素一樣,所以把他們也當(dāng)作不是透明像素處理。這個根據(jù)自己能夠接受的限度去傳參。
實例圖片
帶透明像素

不帶透明像素

canvas
關(guān)于canvas的更多使用,請參考 www.npmjs.com/package/can…
總結(jié)
到此這篇關(guān)于如何使用Node.js判斷png圖片是否存在透明像素的文章就介紹到這了,更多相關(guān)Node.js判斷png圖片透明像素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決node.js含有%百分號時發(fā)送get請求時瀏覽器地址自動編碼的問題
這篇文章主要介紹了解決node.js含有%百分號時發(fā)送get請求時瀏覽器地址自動編碼的問題,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
node.js 和HTML5開發(fā)本地桌面應(yīng)用程序
這篇文章主要介紹了node.js 和HTML5開發(fā)本地桌面應(yīng)用程序的相關(guān)資料,需要的朋友可以參考下2016-12-12

