The ImageData()
constructor returns a newly instantiated ImageData
object built from the typed array given and having the specified width and height.
This constructor is the preferred way of creating such an object in a Worker
.
Syntax
new ImageData(array, width [, height]); new ImageData(width, height);
Parameters
array
Optional- A
Uint8ClampedArray
containing the underlying pixel representation of the image. If no such array is given, an image with a transparent black rectangle of the specifiedwidth
andheight
will be created. width
- An unsigned long representing the width of the image.
height
- An unsigned long representing the height of the image. This value is optional if an array is given: the height will be inferred from the array's size and the given width.
Return value
A new ImageData
object.
Errors thrown
IndexSizeError
- Thrown if
array
is specified, but its length is not a multiple of(4 * width)
or(4 * width * height)
.
Examples
Creating a blank ImageData object
This example creates an ImageData
object that is 200 pixels wide and 100 pixels tall, containing a total of 20,000 pixels.
let imageData = new ImageData(200, 100);
// ImageData { width: 200, height: 100, data: Uint8ClampedArray[80000] }
Initializing ImageData with an array
This example instantiates an ImageData
object with pixel colors defined by an array.
HTML
<canvas id="canvas"></canvas>
JavaScript
The array (arr
) has a length of 40000
: it consists of 10,000 pixels, each of which is defined by 4 values. The ImageData
constructor specifies a width
of 200
for the new object, so its height
defaults to 10,000 divided by 200, which is 50
.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const arr = new Uint8ClampedArray(40000);
// Iterate through every pixel
for (let i = 0; i < arr.length; i += 4) {
arr[i + 0] = 0; // R value
arr[i + 1] = 190; // G value
arr[i + 2] = 0; // B value
arr[i + 3] = 255; // A value
}
// Initialize a new ImageData object
let imageData = new ImageData(arr, 200);
// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);
Result
Specification
Specification | Status | Comment |
HTML Living StandardThe definition of 'ImageData()' in that specification. | Living Standard | Initial definition. |
Browser compatibility
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 42 |
Edge
Full support ≤18 |
Firefox
Full support 29 |
IE
No support No |
Opera
Full support 29 |
Safari
? |
WebView Android
No support No |
Chrome Android
Full support 42 |
Firefox Android
Full support 29 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
See also
CanvasRenderingContext2D.createImageData()
, the creator method that can be used outside workers.
ImageData() by Mozilla Contributors is licensed under CC-BY-SA 2.5.