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

這篇文章主要介紹怎么使用Node.js判斷png圖片是否存在透明像素，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

背景

png格式的圖片存儲空間會比jpg格式的圖片大，但是png圖片的質量明顯更好。有時候并不需要圖片的質量非常的好，但是為了減少包體，需要做一些優化，比如壓縮圖片，把沒有帶透明像素的png圖片轉化成jpg格式的圖片。這片文章主要來講講怎么利用Node.js來檢測沒有帶透明像素的png圖片，以及如何把它轉化成jpg圖片。

代碼

import canvas from 'canvas';
import fs from 'fs';

/**
 * 判斷png圖片是否存在透明像素
 *
 * @param {*} pngPath png圖片路徑
 * @param {number} [limit=255] 透明像素點限度，默認小與255視為透明像素
 * @param {boolean} [isToJpg=false] 如果沒有透明像素是否轉化為jpg圖片
 * @returns
 */
function hasOpacity(pngPath, limit = 255, isToJpg = false) {
  // 獲取圖片的buffer
  const buffer = fs.readFileSync(pngPath);

  // 圖片的寬度存在buffer的第17到20個字節
  const width = buffer.readUInt32BE(16);
  // 圖片的寬度存在buffer的第21到24個字節
  const height = buffer.readUInt32BE(20);

  // 創建一個畫布
  const pngCanvas = canvas.createCanvas(width, height);
  // 拿到畫筆
  const context = pngCanvas.getContext('2d');
  // 創建一張圖片
  const img = new canvas.Image();
  // 記載圖片
  img.src = buffer;
  // 使用畫筆把圖片畫在畫布上
  context.drawImage(img, 0, 0, width, height);

  // 獲取png圖片的數據的像素數據
  let res = context.getImageData(0, 0, width, height);
  let imgData = res.data;
  // 每個像素占用4個字節，計算出一共有多少像素
  // [r, g, b, a]
  let piexCount = imgData.length / 4;

  // 是否已經找到透明像素
  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，則轉化為jpg格式的圖拍呢
  if (!isOpacity && isToJpg) {
    const out = fs.createWriteStream(pngPath.split('.')[0] + '.jpg');
    pngCanvas.createJPEGStream().pipe(out);
    out.on('finish', () => console.log(pngPath, '轉成jpg成功'));
  }

  // 返回
  return isOpacity;
}

console.log(hasOpacity('hh.png', 254, true));
console.log(hasOpacity('jj.png'));

原理：

canvas采用四個字節存放像素，[r, g, b, a]，分別代表紅色通道，綠色通道，藍色通道，透明通道。每個字節是8位，所以每個通道的數據是0～255之間，就透明通道而言，255表示完全不透明，0表示完全透明。我們利用Node.js的buffer和canvas把png圖片轉化成一個個像素點的數據，然后通過遍歷每個透明通道，就可以找到png圖片是否帶有透明像素。

疑問？為什么有個limit參數？

這是因為在實際應用中，有可能存在少量254、253的透明通過，這些看起來就跟完全不透明的像素一樣，所以把他們也當作不是透明像素處理。這個根據自己能夠接受的限度去傳參。

實例圖片

帶透明像素

不帶透明像素

以上是“怎么使用Node.js判斷png圖片是否存在透明像素”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！