nodejs讀取圖檔像素

之前在做H5時，有這麼一個關于圖檔的問題，就是把一張圖檔裁剪得左右空白部分對稱，圖檔背景為白色。這件事情說來也簡單，讀取圖檔的像素，分别檢測左右空白部分的寬度，然後裁剪到一樣即可 。

接下來就涉及到讀取圖檔像素的問題了，發現了一個好用的工具get-pixels，可以讀取圖檔像素并傳回數組。

安裝

npm install --save get-pixels
           

目前支援PNG, JPEG和GIF三種格式的圖檔。

用法

var getPixels = require("get-pixels")

getPixels("lena.png", function(err, pixels) {
  if(err) {
    console.log("Bad image path")
    return
  }
  console.log(pixels)
})
           

如上是讀取資料的過程，傳回值pixels是一個ndarray對象。如下是一個JPG圖檔的輸出示例：

{ data: <Buffer ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ... >,
  shape: [ , ,  ],
  stride: [ , ,  ],
  offset:  }
           

其中data是一維數組，描述顔色的RGBA值，shape表示數組次元和各個次元的大小， 該圖檔長寬分别為560和508，第三個次元表示RGBA值。stride是數組各個次元的步長，offset表示起始值。

可以通過下面的函數周遊ndarray：

getPixels("lena.png", function(err, pixels) {
  if(!err) {
      console.log(pixels.get(,,));//讀取位置(0,0)處的R值。
  }  
})
           

值得注意的是，對于JPG和PNG圖檔，傳回的是三維數組[width, height, channels]。但對于GIF，則是一個四維數組[numFrames, width, height, 4]。

這樣，就可以采集圖檔的像素進行處理，配合gm工具，可以對圖檔進行一些操作了。