ImageData: data 属性

注意：此功能在 Web Workers 中可用。

只读 ImageData.data 属性返回一个 Uint8ClampedArray，其中包含 ImageData 对象的像素数据。数据以 RGBA 顺序存储为一维数组，整数的值介于 0 和 255（包含）之间。

值

一个 Uint8ClampedArray。

示例

获取 ImageData 对象的像素数据

此示例创建一个 ImageData 对象，宽度为 100 像素，高度为 100 像素，总共 10,000 个像素。data 数组为每个像素存储四个值，总共 4 x 10,000 或 40,000 个值。

let imageData = new ImageData(100, 100);
console.log(imageData.data); // Uint8ClampedArray[40000]
console.log(imageData.data.length); // 40000

填充空白 ImageData 对象

此示例创建一个新的 ImageData 对象并用彩色像素填充它。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

由于每个像素在 data 数组中包含四个值，因此 for 循环以四的倍数进行迭代。与每个像素关联的值依次为 R（红色）、G（绿色）、B（蓝色）和 A（alpha）。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);

// Fill the array with RGBA values
for (let i = 0; i < imageData.data.length; i += 4) {
  // Percentage in the x direction, times 255
  let x = ((i % 400) / 400) * 255;
  // Percentage in the y direction, times 255
  let y = (Math.ceil(i / 400) / 100) * 255;

  // Modify pixel data
  imageData.data[i + 0] = x; // R value
  imageData.data[i + 1] = y; // G value
  imageData.data[i + 2] = 255 - x; // B value
  imageData.data[i + 3] = 255; // A value
}

// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);

结果

规范

规范
HTML 标准 # dom-imagedata-data-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。