Canvas getImageData() 获取画布图像 - Canvas 基础教程

如果想要获取画布 ( Canvas ) 上的图像数据，可以使用 ctx.getImageData() 方法

Canvas getImageData() 方法

ctx.getImageData() 用户获取画布上指定区域的图像数据

这个区域通过矩形表示，起始点为 (sx, sy) 、宽为 sw 、高为 sh

返回一个 ImageData 对象实例，如果传递的宽度或者高度为 0 ，那么会抛出 IndexSizeError 异常

语法

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

参数	说明
sx	要获取的矩形区域的左上角 x 坐标
sy	要获取的矩形区域的左上角 y 坐标
sw	要获取的矩形区域的宽度
sh	要获取的矩形区域的高度

如果获取的区域超出了画布，那么超出部分使用透明填充

为啥会这样呢？因为画布本身就是透明的，我们在浏览器来看起来是白色的，那是因为 <body> 使用白色做背景色

范例

我们在画布的 (10,10) 开始画一个 4x4 绿色的矩形，然后获取 (12,12) 点开始 1个像素宽度和高度的图像数据

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,4,4);
console.log(ctx.getImageData(12,12,1,1));

输出结果如下

RGBA(0,128,0,255) 是啥？就是绿色

范例 2

画布本身就是透明的，如果这时候获取那么返回的图形数据就是透明色如果获取的区域超出了画布，那么超出部分使用透明填充

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
console.log(ctx.getImageData(26,26,1,1));

输出结果如下

范例 3

如果获取的区域超出了画布，那么超出部分使用透明填充

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(0,0,canvas.width,canvas.height);
console.log(ctx.getImageData(0,canvas.height-1,1,2));

输出结果如下

图示