终于快接近尾声了，要准备鲜花庆祝下了，之前的章节，我们都学习如何绘图，如何让图像动起来，如何响应用户的交互

是的，这没错，因为我们本来要的就是这些能力，但是我们还没有弄清楚 Canvas 真实的像素原理，我们只是绘了一些图形，然后展现出来，我们并没有深入的去操作或者获取图像背后的像素

我们可能需要导出当前画布上的绘制的东西，或者把绘制的东西赋给一个 <img> 元素让它显示出来

Canvas 能够提供这些操作，因为，它提供了一个 ImageData 对象来操作画布本身的像素能力

ImageData 对象

ImageData 对象中存储着 canvas 对象真实的像素数据

它提供了以下属性

Uint8ClampedArray

Uint8ClampedArray 是一个 高度 × 宽度 × 4 bytes 的一维数组

这是什么意思呢 ？

我们知道，图片是平面图形，有宽有高，因此我们可以把它看作是一个矩形

如果我们以 1 像素为单位给它绘制一个网格，下面这样

那么有多少个小格子呢 ？

不用去数啊，直接是 (width / 1 ) x ( height/1 ) = width x height 个

然后每一个像素格子都是一种颜色，那么总共就有 width x height 个颜色了

我们知道颜色的存储有 3 字节表示法 ( RGB ) 和 四字节表示法 ( RGBA ) ，Canvas 使用的是 RGBA 存储一个颜色值，也即是一个颜色需要 4 字节来存储

所以，那么 Canvas 中存储一个张 width x height 的图片就需要 高度 × 宽度 × 4 bytes 字节了

既然知道了 Uint8ClampedArray 是一个 高度 × 宽度 × 4 bytes 的一维数组

那么它的索引值就是从 0 到 (高度×宽度×4) -1

那么 Uint8ClampedArray 到底是是怎么存放每个像素的颜色呢？

很简单，首先创建一个长度为 (高度×宽度×4) 的字节数组，然后按照下面的公式存放第 m 行 n 列颜色(RGBA)

R = 4 * (m-1) * (n-1) + 0
G = 4 * (m-1) * (n-1) + 1
B = 4 * (m-1) * (n-1) + 2
A = 4 * (m-1) * (n-1) + 3

例如第一行第一列的颜色放在

R = 4 * 0 * 0 + 0 = 0
G = 4 * 0 * 0 + 1 = 1
B = 4 * 0 * 0 + 2 = 2
A = 4 * 0 * 0 + 3 = 3

第一行第二列的颜色放在

R = 4 * 1 * 1 + 0  = 4
G = 4 * 1 * 1 + 1  = 5
B = 4 * 1 * 1 + 2  = 6
A = 4 * 1 * 1 + 3  = 7

如果你看脑补不明白，那就看图吧

是不是很酷，是不是很有趣？

所以我们要取得第 m 行第 n 列颜色值的 B 值，就可以像下面这样使用

ImageData.data[(m-1)*(n-1)*4+3]

例如从行 50，列 30 的像素中读取图片的蓝色部份，就会这样写

blue = ImageData.data[(50-1)*(30-1)*4+3] = ImageData.data[7647]

获取 Uint8ClampedArray 的长度

既然 Uint8ClampedArray 是一个数组，我们就可以使用 length 属性来获得数组的长度

var len = imageData.data.length