ImageData: data 属性
注意：此功能在 Web Workers 中可用。
只读的 ImageData.data 属性返回一个 Uint8ClampedArray 或 Float16Array，其中包含 ImageData 对象的像素数据。数据以 RGBA 顺序存储在一维数组中。
值
类型取决于使用的 ImageData.pixelFormat。
- 如果
pixelFormat是"rgba-unorm8"，则为Uint8ClampedArray。 - 如果
pixelFormat是"rgba-float16"，则为Float16Array。
示例
获取 ImageData 对象的像素数据
此示例创建一个宽度为 100 像素、高度为 100 像素的 ImageData 对象，总共 10,000 个像素。data 数组为每个像素存储四个值，总共 4 x 10,000，即 40,000 个值。
js
let imageData = new ImageData(100, 100);
console.log(imageData.data); // Uint8ClampedArray[40000]
console.log(imageData.data.length); // 40000
如果 ImageData 对象设置为使用浮点像素（例如，用于高动态范围 (HDR) 图像），则 data 将为 Float16Array。
js
let floatArray = new Float16Array(4 * 200 * 200);
let imageData = new ImageData(floatArray, 200, 200, {
pixelFormat: "rgba-float16",
});
console.log(imageData.data); // Float16Array
填充空白 ImageData 对象
此示例创建一个新的 ImageData 对象并用彩色像素填充它。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
由于 data 数组中的每个像素由四个值组成，因此 for 循环以四的倍数进行迭代。与每个像素关联的值按顺序为 R（红色）、G（绿色）、B（蓝色）和 A（Alpha）。
js
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);
结果
更多示例
有关使用 ImageData.data 的更多示例，请参阅 使用 canvas 进行像素处理、CanvasRenderingContext2D.createImageData() 和 CanvasRenderingContext2D.putImageData()。
规范
| 规范 |
|---|
| HTML # dom-imagedata-data |
浏览器兼容性
加载中…