getImageData()

getImageData()是HTML5 Canvas API中的一个方法，用于获取图像数据。它返回一个ImageData对象，表示画布上指定矩形区域内的像素数据。

语法

canvasContext.getImageData(x, y, width, height);

• x：矩形左上角的x轴坐标
• y：矩形左上角的y轴坐标
• width：矩形的宽度
• height：矩形的高度

返回值

返回一个ImageData对象，该对象描述了指定矩形区域内每一个像素的颜色信息和透明度信息。ImageData对象包含以下属性：

• width：矩形的宽度
• height：矩形的高度
• data：一个Uint8ClampedArray类型的数组，保存了指定矩形区域每一个像素的RGBA值，每个像素占四个8位字节，分别表示红、绿、蓝、透明通道的颜色。数组的索引从0开始，每四个索引值表示一个像素的四个颜色通道值。

示例

// 创建canvas
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext('2d');

// 填充矩形
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

// 获取像素数据
var imageData = ctx.getImageData(0, 0, 100, 100);
console.log(imageData.data); // [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, ...]

以上代码创建了一个500x500的canvas，画了一个红色的100x100的矩形，并使用getImageData()获取了该矩形的像素数据。控制台输出了该矩形的各个像素的RGBA值。