本文依然顽固的属于《html5 Canvas画图系列教程》

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对象中。

图形例子

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

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

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

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

进行图像反色

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

ca
点图形看结果
[/runcode]

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

效率问题

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

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

总结：

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