The readonly ImageData.data
property returns a Uint8ClampedArray
that contains the 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).
The readonly ImageData.data
property returns a Uint8ClampedArray
that contains the 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).
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.
js
let imageData = new ImageData(100, 100); console.log(imageData.data); // Uint8ClampedArray[40000] console.log(imageData.data.length); // 40000
This example creates and fills a new ImageData
object with colorful pixels.
html
<canvas id="canvas"></canvas>
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.
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);
For more examples using ImageData.data
, see Pixel manipulation with canvas, CanvasRenderingContext2D.createImageData()
, and CanvasRenderingContext2D.putImageData()
.
Specification |
---|
HTML Standard # dom-imagedata-data-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
data |
1 | 12 | 3.5 | 9 | 9 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data