html5 canvas 图片像素

html5 canvas图像转换成数组

html5的canvas可以进行图片处理,图片是由像素组成的。我们知道canvas有方法getImageData,返回的对象中可以取出,image的data 数组(类似数组的Type Array类型数组,Uint8ClampedArray)。

假设canvas宽高是500*400,那么应该有200000个像素点,而通过getImageData().data获取的data数组的length是800000。

我们还知道rgba表示颜色的方法:

  • r=red
  • g=green
  • b=blue
  • a=alpha

即红绿蓝三原色和透明值。

所以这个data数组是每四个数组值代表一个像素点。这样一来,一个图像就转化成了数据表示的数组。如下面的代码:

var canvas = document.getElementById('canvas');
var ctxt = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
    ctxt.drawImage(img, 0, 0);
    var data = ctxt.getImageData(0, 0, 480, 480).data;
    console.log(data, data.toString());
}
img.src = 'img/pic.jpg';

图像数组的遍历

如上面的代码,我们可以看到数组data就是图片转换成的数组,那么遍历这个数组就可以取得图片的像素点内容:

var data = ctxt.getImageData(0, 0, 480, 480).data;
for(var i =0,len = data.length; i<len;i+=4){
    var red = data[i],
    green = data[i+1],
    blue = data[i+2],
    alpha = data[i+3];

}