canvas标签getImageData() 方法获取图像数据(ImageData 对象),该对象拷贝了画布指定矩形的像素数据。
输出ImageData像素对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>输出ImageData像素对象-HTML教程www.xuandaima.com</title> </head> <body> <canvas id="myCanvas" width="350" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="blue"; ctx.fillRect(10,10,60,60); function copy() { var imgData=ctx.getImageData(10,10,60,60); ctx.putImageData(imgData,10,80); } </script> <button onclick="copy()">复制</button> </body> </html>
document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型(2 维)的环境,未来可能会支持3维,但现在支持2维。 |
ctx.fillStyle="blue" | 填充绘画样式设置为蓝色 |
ctx.fillRect(10,10,60,60) | 以矩形填充,绘制X坐标为10,Y坐标为10,矩形宽为60像素,矩形高为60像素。 |
function copy() | 用于按钮按下时调用该函数 |
var imgData=ctx.getImageData(10,10,60,60) | 得到ctx对象坐标为10,Y坐标为10,矩形宽为60,矩形高为60的数据赋值给imgData变量。 |
ctx.putImageData(imgData,10,80) | 将数据从已有的 ImageData 对象绘制到(10,80)位图的方法。 详情请阅读putImageData()。 |
参数 | 描述 |
---|---|
imageData | Uint8ClampedArray的实例,描述了一个一维数组,Uint8ClampedArray的length = 4*width*height。以0填充整个像素矩阵。如果不给定数组,会创建一个“完全透明”(因为透明度值为0)的黑色矩形图像。包含以 RGBA 顺序的数据(可参考RGBA写法),数据使用 0 至 255(包含)的整数表示(可阅读data属性) |
height | 无符号长整型(unsigned long),返回在图像数据对象中的行的数量。(可阅读height属性) |
width | 无符号长整型(unsigned long),返回在图像数据对象中每一行像素的数量。(可阅读width属性) |
注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
context.getImageData(sx, sy, sw, sh);
参数 | 描述 |
---|---|
sx | 将要被提取的图像数据矩形区域的左上角 x 坐标。 |
sy | 将要被提取的图像数据矩形区域的左上角 y 坐标。 |
sw | 将要被提取的图像数据矩形区域的宽度。 |
sh | 将要被提取的图像数据矩形区域的高度。 |
获取imgData对象第一个像素的颜色和透明值
red=imgData.data[0]; green=imgData.data[1]; blue=imgData.data[2]; alpha=imgData.data[3]; alert(red + " " + green + " " + blue + " " + alpha);
document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型(2 维)的环境,未来可能会支持3维,但现在支持2维。 |
ctx.fillStyle="blue" | 填充绘画样式设置为蓝色 |
ctx.fillRect(10,10,60,60) | 以矩形填充,绘制X坐标为10,Y坐标为10,矩形宽为60像素,矩形高为60像素。 |
function copy() | 用于按钮按下时调用该函数 |
var imgData=ctx.getImageData(10,10,60,60) | 得到ctx对象坐标为10,Y坐标为10,矩形宽为60,矩形高为60的数据赋值给imgData变量,详情请阅读getImageData(),它可复制画布上指定的矩形的像素数据 |
red=imgData.data[0]; | 获取红色值赋值给red变量 |
green=imgData.data[1]; | 获取绿色值赋值给green变量 |
blue=imgData.data[2]; | 获取蓝色值赋值给blue变量 |
alpha=imgData.data[3]; | 获取透明值赋值给啊alpha变量 |
alert(red + " " + green + " " + blue + " " + alpha); | 分别弹出红色、绿色、蓝色和透明值的数值 |