CanvasRenderingContext2D.getImageData() - Web API 接口参考 编辑

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

语法

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

参数

sx

将要被提取的图像数据矩形区域的左上角 x 坐标。

sy

将要被提取的图像数据矩形区域的左上角 y 坐标。

sw

将要被提取的图像数据矩形区域的宽度。

sh

将要被提取的图像数据矩形区域的高度。

返回值

一个ImageData 对象，包含canvas给定的矩形图像数据。

错误抛出

IndexSizeError

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

示例

使用 getImageData 方法

这是一段使用 getImageData 方法的简单的代码片段。 获取更多信息，请看 canvas像素控制 和 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
HTML Living Standard CanvasRenderingContext2D.getImageData	Living Standard

浏览器兼容性

BCD tables only load in the browser

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.

兼容性注解

• 从 Gecko 5.0开始， getImageData() 可以正确地接受超出canvas边界的矩形；canvas范围外的像素返回值是透明的，并且如果矩形小于一个像素，会返回至少一像素值的图像数据。

参见

• 接口定义， CanvasRenderingContext2D.
• ImageData
• Pixel manipulation with canvas