Web ImageData API | ImageData.data 属性

概述

Web ImageData API 提供了一种在 Canvas 上处理像素数据的方式。 ImageData.data 属性是 ImageData 对象的一个属性，它返回一个包含每个像素 R、G、B 以及 alpha 值的数组。

语法

var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;

参数

• x：表示将要被读取的像素数据的左上角横坐标
• y：表示将要被读取的像素数据的左上角纵坐标
• width：表示将要被读取的像素数据的宽度
• height：表示将要被读取的像素数据的高度

返回值

ImageData.data 属性返回一个 Uint8ClampedArray 数组对象，其中包含了处理后的像素数据。

使用

获取像素数据

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var width = canvas.width;
var height = canvas.height;

var imageData = context.getImageData(0, 0, width, height);
var pixelData = imageData.data;

这段代码演示了如何在 Canvas 上获取像素数据，通过 getImageData() 函数可以获取到一个 ImageData 对象，调用 ImageData.data 属性可以得到像素数据。

ImageData.data 属性返回一个数组，其长度为 width * height * 4，由于每个像素由 R、G、B 和 alpha 值组成，所以数据长度为像素数乘以 4。

数组中每四个元素表示一个像素的 R、G、B 和 alpha 值，所以可以通过像素的横纵坐标以及数组下标来获取对应像素的数据。

修改像素数据

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var width = canvas.width;
var height = canvas.height;

var imageData = context.getImageData(0, 0, width, height);
var pixelData = imageData.data;

for (var i = 0; i < pixelData.length; i += 4) {
  // 获取像素的 R、G、B 和 alpha 值
  var r = pixelData[i];
  var g = pixelData[i + 1];
  var b = pixelData[i + 2];
  var alpha = pixelData[i + 3];

  // 修改像素的 R、G、B 值
  pixelData[i] = 255 - r;     // R 取反
  pixelData[i + 1] = 255 - g; // G 取反
  pixelData[i + 2] = 255 - b; // B 取反
}

// 将修改后的像素数据绘制到 Canvas 上
context.putImageData(imageData, 0, 0);

这段代码演示了如何在 Canvas 上修改像素数据，遍历所有像素，将每个像素的 R、G、B 值取反后，调用 putImageData() 函数重新绘制到 Canvas 上。

注意事项

• Uint8ClampedArray 是 Uint8Array 的一个子类，只接受 0 到 255 的整数，如果给定的值不在此范围内，会自动截断。
• ImageData 对象可以使用 putImageData() 函数在 Canvas 上绘制。需要注意的是，putImageData() 函数在做像素数据的绘制时不做任何的 gamma 或 color space corretion 相关的处理，所以在进行图像处理时需要手动进行这些处理。
• ImageData.data 属性是一个 Uint8ClampedArray 数组对象，而不是一个拷贝，如果对其进行修改，则 Canvas 上的像素会即时更新。