Name
ImageData — an array of pixel data for an image
Properties
data
A read-only reference to an array-like object that contains the image data
height
The number of rows of image data
width
The number of pixels per row of data
Description
An ImageData object holds the red, green, blue, and alpha
components of a rectangular region of pixels. Obtain an ImageData object
with the createImageData()
or
getImageData()
methods of the CanvasRenderingContext2D object of a
<canvas>
tag.
The width
and height
properties specify the dimensions of the rectangle of pixels. The
data
property is an array that holds the pixel data.
Pixels appear in the data[]
array in left-to-right
and top-to-bottom order. Each pixel consists of four byte values that
represent the R, G, B, and A components, in that order. Thus, the color
components for a pixel at (x,y)
within an ImageData
object image
can be accessed like this:
var offset = (x + y*image.width) * 4; var red = image.data[offset]; var green = image.data[offset+1]; var blue = image.data[offset+2]; var alpha = image.data[offset+3];
The data[]
array is not a true JavaScript
array, but an array-like object known as a CanvasPixelArray object.
(CanvasPixelArray is documented here, and does not have its own entry in
this reference section.) A CanvasPixelArray is an optimized array of
bytes. The elements of this array must be integers between 0 and 255.
The elements are read/write, but the length of the array is fixed. For
any ImageData object i
,
i.data.length
will always ...
Get Canvas Pocket Reference now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.