CanvasRenderingContext2D.getImageData()

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
WHATWG HTML Living Standard
CanvasRenderingContext2D.getImageData
Living Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

兼容性注解

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

参见

文档标签和贡献者

 此页面的贡献者: ice-i-snow
 最后编辑者: ice-i-snow,