Html5 canvas画图教程22:获取与操作像素信息getImageData_H5之家

getImageData的直译即“获得图像数据”，他的作用是从canvas中提取像素出来。所以，他是有返回值的。

语法及返回值

ctx.getImageData(x,y,width,height);

这就是他的语法。而他的返回值是一个ImageData对象：

ImageData { width=10, height=10, data=Uint8ClampedArray}

这个ImageData对象包括：width,height,以及一个像素信息数组data。

这个像素信息数组是重中之重。他包括red,green,blue,和alpha,且每个都是0-255的数值——连alpha也是。

这个data数组的大小由像素个数决定，即ImageData的width*height.如getImageData(1,1,1,1)，那data就只有一个像素信息；而getImageData(1,1,10,10)，则有10*10=100个。

而像素信息在data中是怎么保存的呢？本来我的理解，data可以是一个二维数组，每个元素就是一个数组，每个元素保存一个像素信息。

但是，我错了。data只是个一维数组！

data的元素始终依次是red,green,blue,alpha,red,green,blue。。。一直重复到最后一个。

所以，data的length始终是像素个数*4.而在循环data的时候，也是以4为步进。

了解了这个ImageData对象，那么，像素提取出来有什么用呢？我们可以把提出来的像素进行一些操作，然后放回canvas里，就能得到一幅新的图像——比如类似PS的滤镜效果。

而把ImageData放入canvas的方法，则是putImageData.

ctx.putImageData(imagedata,x,y)

注意，putImageData就没有width,height参数了，因为他们已经包含在了imagedata对象中。

图形例子

我画了一个圆形和一个矩形，再从中提取像素：

	
						ctx.arc(100,100,50,0,Math.PI*2);

						ctx.fillStyle = "rgba(234,1,1,0.6)";

						ctx.fill();

						ctx.beginPath();

						ctx.fillStyle = 'rgba(1,234,1,0.7)';

						ctx.fillRect(100,100,70,100);

						ca.onclick = function  (e) {

						    var x = e.clientX,

						        y = e.clientY,

						        caL = ca.getBoundingClientRect().left,

						        caT = ca.getBoundingClientRect().top;

						    var X = x-caL, Y = y-caT;

						    // console.log('X:'+X+',Y:'+Y);

						    var imagedata = ctx.getImageData(X,Y,10,10);

						    for(var i=0,dl = imagedata.data.length;i<dl;i+=4) {

						        imagedata.data[i] = 255-imagedata.data[i];

						        imagedata.data[i+1] = 255-imagedata.data[i];

						        imagedata.data[i+2] = 255-imagedata.data[i];

						    }

						    ctx.putImageData(imagedata,X,Y);

						    // jg.innerHTML = data.data;

						    console.log(imagedata);

						}

我把像素提出来后，对每个像素进行了反色（即255-本色），但我没改alpha通道。然后把改变后的imagedata放入canvas中。

效果预览：
[runcode id=’ksjdklj’]
点图形看结果
[/runcode]

不过，这效果太没特色了，无法激发人的学习欲望。所以我再写一个变图片的吧.

进行图像反色

[runcode id=”sjdk”]原图：偷自w3c

点图形看结果
[/runcode]

注意，经实验，imagedata的width和height是只读的。

效率问题

如果imagedata.data包含的像素越多，则在循环时耗时更久，对每个像素操作也会花去很多时间。

简单的说，图片越大，得到的像素越多，就越卡！！

总结：

getImageData有返回值，是imageData对象。包括width,height,data
imagedata.data以4为步进
imagedata的width与height不可更改
imagedata不放入canvas中就没有作用