CanvasRenderingContext2D.getImageData()

在此页

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

CanvasRenderingContext2D 方法 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 对象。

注意： Image data can be painted onto a canvas using the putImageData() 方法。

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

句法

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

参数

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.

返回值

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) .

异常

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 used in this way. See Allowing cross-origin use of images and canvas .

范例

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);

结果

规范

规范	状态	注释
HTML 实时标准 The definition of 'CanvasRenderingContext2D.getImageData' 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
`getImageData`	Chrome 1	Edge 12	Firefox 2 2 Since Firefox 5, `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 9	Opera 9.5	Safari 4	WebView Android 1	Chrome Android 18	Firefox Android 4 4 Since Firefox 5, `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 10.1	Safari iOS 3.2	Samsung Internet Android 1.0

图例

完整支持

另请参阅

The interface defining this method: CanvasRenderingContext2D
ImageData 对象
CanvasRenderingContext2D.putImageData()
Pixel manipulation with canvas

元数据

最后修改： Mar 18, 2019

在此页

句法

参数

返回值

异常

范例

Getting image data from a canvas

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题