getImageData
作用: 用来获取canvas画布上指定矩形区域的像素数据;
参数:
参数 | 含义 |
---|---|
x | 矩形的左顶点横坐标 |
y | 矩形的左顶点纵坐标 |
width | 矩形的宽度 |
height | 矩形的高度 |
返回值: 返回的是一个ImageData对象,该对象包含了三个只读属性:
属性 | 含义 |
---|---|
ImageData.width | ImageData的宽度,用像素表示 |
ImageData.height | ImageData的高度,用像素表示 |
ImageData.data | 类型为Uint8ClampedArray的一维数组,每四个数组元素代表了一个像素点的RGBA信息,每个元素数值介于0~255 |
ImageData.data的结构:
假设现在取到了画布上的两个像素点,分别是不透明度为100%的纯黑色和纯白色,那么平常在写css的时候可以这么表示:rgba(0,0,0,1),rgba(255,255,255,1)
我们都知道,前面的三个参数代表了RGB颜色,这个与ImageData.data表示方式相同;最后一个参数1代表了透明度A,范围为(0, 1)。但是ImageData.data的元素数值范围都在(0, 255)。因此这里需要按照0 => 0,1 => 255的方式对应下。
因此,如果用getImageData()获取这两个像素点的信息,得到的ImageData.data如下:
[0,0,0,255,255,255,255,255]
注意:getImageData按照从左到右,从上到下的顺序去存储像素点信息的
示例:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
...
var imgData=ctx.getImageData(0,0,width,height);