之前在做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: [ 560, 508, 4 ],
stride: [ 4, 2240, 1 ],
offset: 0 }
其中data是一维数组,描述颜色的RGBA值,shape表示数组维度和各个维度的大小, 该图片长宽分别为560和508,第三个维度表示RGBA值。stride是数组各个维度的步长,offset表示起始值。
可以通过下面的函数遍历ndarray:
getPixels("lena.png", function(err, pixels) {
if(!err) {
console.log(pixels.get(0,0,0));//读取位置(0,0)处的R值。
}
})
值得注意的是,对于JPG和PNG图片,返回的是三维数组[width, height, channels]。但对于GIF,则是一个四维数组[numFrames, width, height, 4]。
这样,就可以采集图片的像素进行处理,配合gm工具,可以对图片进行一些操作了。