context.getImageData 简介

Html5 Canvas 使你能够获取和更改画布上任何像素的颜色。

你可以使用 Canvas 的像素操作来：

• 为图像创建颜色选择器或在色轮上选择颜色。
• 创建复杂的图像滤镜，如模糊和边缘检测。
• 在像素级别重新着色图像的任何部分（如果使用 HSL，你甚至可以在保留重要的光照和饱和度的同时重新着色图像，因此结果看起来不像是某人在图像上拍了一些油漆）。注意：Canvas 现在具有 Blend Compositing，在某些情况下也可以重新着色图像。
• 敲除图像中某个人/项目周围的背景，
• 创建一个油漆桶工具来检测和填充图像的一部分（例如，将用户点击的花瓣的颜色从绿色更改为黄色）。
• 检查图像的内容（例如，面部识别）。

常见问题：

• 出于安全原因，如果你绘制的图像源自与网页本身不同的域，则禁用 getImageData。
• getImageData 是一种相对昂贵的方法，因为它创建了一个大的像素数据阵列，因为它不使用 GPU 来协助它的工作。注意：Canvas 现在具有混合合成，可以执行与 getImageData 相同的像素操作。
• 对于 .png 图像，getImageData 可能不会报告与原始 .png 文件完全相同的颜色，因为在画布上绘制图像时允许浏览器进行伽马校正和 alpha 预复制。

获得像素颜色

使用 getImageData 获取全部或部分画布内容的像素颜色。

getImageData 方法返回 imageData 对象

imageData 对象具有包含像素颜色信息的 .data 属性。

data 属性是 Uint8ClampedArray，包含所有请求像素的红色，绿色，蓝色和 Alpha（不透明度）颜色数据。

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;

// Fetch the imageData object 
var imageData = context.getImageData(x,y,width,height);

// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;

你可以在 data 数组中获取任何[x，y]像素的位置，如下所示：

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

然后你可以像这样获取该像素的红色，绿色，蓝色和 alpha 值：

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

显示像素数据阵列的结构的插图

context.getImageData 如下图所示，适用于 2x3 像素大小的小画布：