--- title: CanvasRenderingContext2D.getImageData() slug: Web/API/CanvasRenderingContext2D/getImageData translation_of: Web/API/CanvasRenderingContext2D/getImageData ---
{{APIRef}}

CanvasRenderingContext2D.getImageData() 返回一个{{domxref("ImageData")}}对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。

语法

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

参数

sx
将要被提取的图像数据矩形区域的左上角 x 坐标。
sy
将要被提取的图像数据矩形区域的左上角 y 坐标。
sw
将要被提取的图像数据矩形区域的宽度。
sh
将要被提取的图像数据矩形区域的高度。

返回值

一个{{domxref("ImageData")}} 对象，包含canvas给定的矩形图像数据。

错误抛出

IndexSizeError
如果高度或者宽度变量为0，则抛出错误。

示例

使用 getImageData 方法

这是一段使用 getImageData 方法的简单的代码片段。 获取更多信息，请看 canvas像素控制 和 {{domxref("ImageData")}} 对象。

HTML

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

JavaScript

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

console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }

规范描述

Specification Status Comment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}} {{Spec2('HTML WHATWG')}}

浏览器兼容性

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

兼容性注解

参见