快捷導(dǎo)航

如何使用Node.js判斷png圖片是否存在透明像素

更新時間：2021年08月02日 15:36:05 作者：HJ5

這篇文章主要給大家介紹了關(guān)于如何使用Node.js判斷png圖片是否存在透明像素的相關(guān)資料,文中將實現(xiàn)的原理以及代碼介紹的非常詳細(xì),需要的朋友可以參考下

背景

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] 透明像素點限度，默認(rèn)小與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]，分別代表紅色通道，綠色通道，藍(lán)色通道，透明通道。每個字節(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ù)自己能夠接受的限度去傳參。