ImageData.data | Web API

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

The readonly ImageData.data 特性返回 Uint8ClampedArray 包含 ImageData object's pixel data. Data is stored as a one-dimensional array in the RGBA order, with integer values between 0 and 255 (inclusive).

句法

imageData.data

范例

Getting an ImageData object's pixel data

This example creates an ImageData object that is 100 pixels wide and 100 pixels tall, making 10,000 pixels in all. The data array stores four values for each pixel, making 4 x 10,000, or 40,000 values in all.

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

Filling a blank ImageData object

This example creates and fills a new ImageData object with colorful pixels.

HTML

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

JavaScript

Since each pixel consists of four values within the data array, the for loop iterates by multiples of four. The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(100, 100);
// Iterate through every pixel
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);

结果

More examples

For more examples using ImageData.data ，见 Pixel manipulation with canvas , CanvasRenderingContext2D.createImageData() ，和 CanvasRenderingContext2D.putImageData() .

规范

规范	状态	注释
HTML 实时标准 The definition of 'ImageData.data' in that specification.	实时标准	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`data`	Chrome Yes	Edge 12	Firefox 14	IE 9	Opera 9	Safari 3.1	WebView Android Yes	Chrome Android Yes	Firefox Android 14	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

在此页

句法

范例