Canvas操作图象像素--ImageDate()--图象反像和变灰

   ImageData 接口描述 <canvas> 元素的一个隐含像素数据的区域。使用 ImageData() 构造函数创建或者使用和 canvas 在一起 CanvasRenderingContext2D  对象的创建方法： createImageData() 和 getImageData()。也可以使用 putImageData() 设置 canvas 的一部分。

构造函数

ImageData() 

使用给定的 Uint8ClampedArray创建一个  ImageData 对象，并包含图像的大小。如果不给定数组，会创建一个黑色矩形图像。注意，这是最常见的方式去创建这样一个对象，在  createImageData() 不可用时。

属性

ImageData.data  只读

Uint8ClampedArray 描述了一个一维数组，包含以 RGBA 顺序的数据，数据使用   0 至  255（包含）的整数表示。 data属性返回一个  Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引0位置。像素从左到右被处理，然后往下，遍历整个数组。

ImageData.height  只读

无符号长整型（ unsigned  long），使用像素描述  ImageData 的实际高度。

ImageData.width  只读

无符号长整型（unsigned long），使用像素描述 ImageData 的实际宽度。


Uint8ClampedArray  包含高度 × 宽度 × 4 bytes数据，索引值从0到(高度×宽度×4)-1

例如，从行50，纵200的像素中读取图片的蓝色部份，你会写以下代码：

blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2];

你可能用会使用Uint8ClampedArray.length属性来读取像素数组的大小（以bytes为单位）：

var numBytes = imageData.data.length;

创建一个ImageData对象

去创建一个新的，空白的ImageData对象，你应该会使用createImageData() 方法。有2个版本的createImageData()方法。

var myImageData = ctx.createImageData(width, height);

上面代码创建了一个新的具体特定尺寸的ImageData对象。所有像素被预设为透明黑。

你也可以创建一个被anotherImageData对象指定的相同像素的ImageData对象。这个新的对象像素全部被预设为透明黑。这个并非复制了图片数据。