访问像素值.DOCVIP

17．访问像素值 虽然调整尺寸，裁剪和变形可用来创建有趣的图像效果，但画布还有另一个更强大的特性：像素处理。通过访问2D渲染上下文的各个像素，我们就能够得到每一个像素的颜色和阿尔法值等信息。我们还能够修改每一个像素的颜色，使之显示出截然不同的效果。 在画布中访问像素的方法是getImageData。这个方法有4个参数：要访问的像素区域原点坐标（x，y）、像素区域的宽度和高度(参见图1)。它可以用代码表示为： context.getImageData(x, y, width, height); 调用getImageData不会出现任何可见的效果，但是它会返回一个2D渲染上下文ImageData对象，这个ImageData对象包含3个属性：width表示所访问像素区域的宽度，height表示像素区域的高度，data是一个包含所访问区域中全部像素信息的CanvasPixelArray。 图1 调用getImageData方法的示意图 width和height属性不需要多做解释，此处我们真正关注的是data属性。data属性存储的是一个CanvasPixelArray，它是一个JavaScript一维数组，每一个像素用4个整数值表示，范围从0至255，分别表示红(r)、绿(g)、蓝(b)和阿尔法值(a)（参见图2）。所以，数组的前4项(0-3)是第一个像素的颜色值，接下来4项(4-7)是第二个像素的颜色值，以此类推。CanvasPixelArray在这里是关键，所以一定要正确理解它的工作原理。 图2 3×3区域的CanvasPixelArray 在详细解释之前，先看一个简单示例。我们使用图2所定义的索引数字来访问CanvasPixelArray中第一个像素的RGBA值。 var numPixels = imageData.width*imageData.height; for (var i = 0; i numPixels; i++) { pixels[i*4] = 255; // Red pixels[i*4+1] = 0; // Green pixels[i*4+2] = 0; // Blue pixels[i*4+3] = 255; // Alpha }; CanvasPixelArray本身绝对不知道所访问的像素区域的尺寸。相反，返回的数组实际上只是一长串RGBA颜色值，它的长度等于所访问区域的像素个数乘以4（每个像素有4个颜色值）。例如，如果访问一个宽度和高度均为3个像素的像素栅格，那么CanvasPixelArray的长度就是36(3×3×4)，宽度和高度为200时，则长度为160 000 (200×200×4)，以此类推。 CanvasPixelArray中的像素排列顺序很简单：左上角像素位于数组开头（从位置0红色到位置3阿尔法值），而右下角像素位于数组末尾。这意味着，在所访问的区域中，每一行像素是从左到右访问的，直至到达行尾，然后再同样从左到右访问下一行（参见图2的栅格）。 所以，如果CanvasPixelArray只是一长串颜色值，而不知道像素区域的尺寸，那么应该如何从数组访问一个具体像素呢？在图2所示的例子中，应该如何访问（x，y）坐标位置为(2，2)的中心像素呢？通过查看图2，我们很容易发现它从数组索引16开始，但是如果没有这个图，我们应该如何确定呢？一些聪明的人已经帮我们计算出一个公式，我们可以用这个公式准确地计算出你需要从CanvasPixelArray中访问的像素，而且它非常简单： var imageData = context.getImageData(0, 0, 3, 3); // 3x3 grid var width = imageData.width; var x = 2; var y = 2; var pixelRed = ((y-1)*(width*4))+((x-1)*4); var pixelGreen = pixelRed+1; var pixelBlue = pixelRed+2; var pixelAlpha = pixelRed+3; 现在，我们最关注的地方是计算像素红色值索引位置的公式。我们拆解分析这个公式，以了解它的计算原理： (y-1) 因为我们使用非0坐标值定义像素的（x，y）坐标位置，所以需要将坐标值减1。它的作用只是将画布所使用的坐标系统转换为数组所使用的从0开始的坐标系统。 (width*4) 这会得到图像中每一行的颜色值个数。通过将（y-1）的结果与这个数相乘，就能够得到所访问行的开头位置的数组索引值（y坐标位置）。在这个例子中，索引值是12，这对应图2第