この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

The CanvasRenderingContext2D method getImageData() of the Canvas 2D API returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.

This method is not affected by the canvas's transformation matrix. If the specified rectangle extends outside the bounds of the canvas, the pixels outside the canvas are transparent black in the returned ImageData object.

Note: Image data can be painted onto a canvas using the putImageData() method.

You can find more information about getImageData() and general manipulation of canvas contents in Pixel manipulation with canvas.

Syntax

ctx.getImageData(sx, sy, sw, sh);

Parameters

sx
The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
sy
The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
sw
The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left.
sh
The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up.

Return value

An ImageData object containing the image data for the rectangle of the canvas specified. The coordinates of the rectangle's top-left corner are (sx, sy), while the coordinates of the bottom corner are (sx + sw, sy + sh).

Exceptions

IndexSizeError
Thrown if either sw or sh are zero.
SecurityError
The canvas contains or may contain pixels which were loaded from an origin other than the one from which the document itself was loaded. To avoid SecurityError being thrown in this situation, configure CORS to allow the source image to be use in this way. See Allowing cross-origin use of images and canvas.

Example

Getting image data from a canvas

This example draws a rectangle, and then uses getImageData() to grab a portion of the canvas.

HTML

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

JavaScript

The object retrieved by getImageData() has a width of 200 and a height of 100, for a total of 20,000 pixels. Of those pixels, most are either transparent or taken from off the canvas; only 5,000 of them are opaque black (the color of the drawn rectangle).

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();

let imageData = ctx.getImageData(60, 60, 200, 100);
ctx.putImageData(imageData, 150, 10);

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.getImageData' in that specification.
Living Standard  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support Yes
Full support Yes
Full support 5
Notes
Notes getImageData now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black and now also returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support Yes
Full support Yes
Full support 5
Notes
Notes getImageData now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black and now also returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

See also

ドキュメントのタグと貢献者

最終更新者: mfluehr,