Canvas getImageData() 获取画布图像

如果想要获取画布 ( 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));

输出结果如下

图示

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.