摘要：此腳本的功能是將格式的圖片中的白色背景轉(zhuǎn)成透明，然后再保存成格式的圖片如果圖片本身有不想被轉(zhuǎn)換的白色區(qū)域，使用其他方法吧。所以說(shuō)如果我們想實(shí)現(xiàn)白色背景的圖片轉(zhuǎn)成透明的圖片，只需要將白色背景對(duì)應(yīng)的像素點(diǎn)得值變成就好了。

作者 @zwhu
源碼 @raw
原文章 @github

老板讓我這個(gè)不會(huì)P圖的偽前端把公司的Logo放到公司網(wǎng)站上，結(jié)果給了我一張 JPEG 格式的圖片，作為一個(gè)有追求的碼農(nóng)，怎么能現(xiàn)學(xué) ps，于是利用一點(diǎn)HTML5+NODE的知識(shí)寫(xiě)了個(gè)轉(zhuǎn)換的腳本。

此腳本的功能是將 JPEG 格式的圖片中的白色背景轉(zhuǎn)成透明，然后再保存成PNG格式的圖片；如果圖片本身有不想被轉(zhuǎn)換的白色區(qū)域，使用其他方法吧。

原理很簡(jiǎn)單，只有兩點(diǎn)：

RGBA的解釋 我們知道圖片由很多個(gè)像素點(diǎn)組成的，每個(gè)像素點(diǎn)都有顏色，而顏色是由三基色RGB構(gòu)成。而A是Alpha通道，用作不透明度參數(shù)，0%為完全透明，100%是完全不透明。所以說(shuō)如果我們想實(shí)現(xiàn)白色背景的JPEG 圖片轉(zhuǎn)成透明的 PNG 圖片，只需要將白色背景對(duì)應(yīng)的像素點(diǎn)得Alpha值變成0就好了。

HTML5新增加了canvas，可以用來(lái)繪制圖形，也可以對(duì)圖片的像素進(jìn)行操作。通過(guò) getImageData() 方法可以返回原始的像素信息 ImageData 對(duì)象。ImageData 對(duì)象中的像素是可寫(xiě)的（由 RGBA 組成），因此我們可以修改像素的Alpha通道值，然后再通過(guò) putImageData() 方法將這些像素復(fù)制到畫(huà)布中。

有了上面的知識(shí)，我們可以很輕松的通過(guò)查 canvas 的 API 來(lái)寫(xiě)出轉(zhuǎn)換的代碼(ES6)，代碼在下面，代碼不難，也寫(xiě)了很詳細(xì)的注釋，雖然我是用 node-canvas 實(shí)現(xiàn)的，但是改成瀏覽器版本的話，也不需要幾行代碼，原理是想通的：

import Canvas  from "canvas"
import fs from "fs"

const Image = Canvas.Image

// 初始化 img 和 start time
// 獲取命令行輸入的源圖片和保存的圖片地址
let img = new Image
  , start = new Date()
  , rawPath =  process.argv[2]
  , savePath = process.argv[3]

// 在命令行中沒(méi)有輸入圖片地址，拋錯(cuò)
if(!rawPath)
  throw new Error("input raw image path")

if(!savePath)
  throw new Error("input save image path")

img.onerror = function(err){
  throw err
}

// 圖片加載完成
img.onload = function(){
    //    獲取圖片的width和height
  let width = img.width
    , height = img.height
    , canvas = new Canvas(width, height)
    , ctx = canvas.getContext("2d")

  // 將源圖片復(fù)制到畫(huà)布上
  // canvas 所有的操作都是在 context 上，所以要先將圖片放到畫(huà)布上才能操作
  ctx.drawImage(img, 0, 0, width, height)

  let imageData = ctx.getImageData(0, 0, width, height)
  
  // 獲取畫(huà)布的像素信息
  // 是一個(gè)一維數(shù)組，包含以 RGBA 順序的數(shù)據(jù)，數(shù)據(jù)使用  0 至 255（包含）的整數(shù)表示
  // 如：圖片由兩個(gè)像素構(gòu)成，一個(gè)像素是白色，一個(gè)像素是黑色，那么 data 為
  // [255,255,255,255,0,0,0,255] 
  // 這個(gè)一維數(shù)組可以看成是兩個(gè)像素中RBGA通道的數(shù)組的集合即:
  // [R,G,B,A].concat([R,G,B,A])
    , data = imageData.data

 // 對(duì)像素集合中的單個(gè)像素進(jìn)行循環(huán)，每個(gè)像素是由4個(gè)通道組成，所以 i=i+4
  for(let i = 0; i < data.length; i+=4) {
      // 得到 RGBA 通道的值
    let r = data[i]
      , g = data[i+1]
      , b = data[i+2]

    // 我們從最下面那張顏色生成器中可以看到在圖片的右上角區(qū)域，有一小塊在
    // 肉眼的觀察下基本都是白色的，所以我在這里把 RGB 值都在 245 以上的
    // 的定義為白色
    // 大家也可以自己定義的更精確，或者更寬泛一些
    if([r,g,b].every(v => v < 256 && v > 245)) data[i+3] = 0
  }
  
  // 將修改后的代碼復(fù)制回畫(huà)布中
  ctx.putImageData(imageData, 0, 0)

  // 將修改后的圖片保存
  let out = fs.createWriteStream(`${__dirname}/${savePath}`)
    , stream = canvas.pngStream()

  stream.on("data", function (chunk) {
    out.write(chunk)
  })

  stream.on("end", function () {
    console.log(`保存到 ${__dirname}/${savePath}`)
    console.log(`耗時(shí): ${new Date()-start}ms`)
  })
}

img.src = `${__dirname}/${rawpath}`