首页 专题 H5案例 前端导航 UI框架

Canvas入门基础(七):像素操作

作者:TG 日期: 2016-06-02 阅读: 956
一、ImageData对象
ImageData对象中存储着canvas对象真实的像素数据,它包含以下几个只读属性: width 图片宽度,单位是像素 height 图片高度,单位是像素 data 包含着RGBA格式的整型数据,范围在0至255之间(包括255)。

我们具体来看看data属性:
data 属性返回一个对象,该对象包含指定的 ImageData 对象的图像数据。
对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值: R - 红色(0-255) G - 绿色(0-255) B - 蓝色(0-255) A - alpha 通道(0-255; 0 是透明的,255 是完全可见的) color/alpha 信息以数组形式存在,并存储于 ImageData 对象的 data 属性中。
二、 创建一个ImageData对像
有两个版本的 createImageData() 方法: 2.1 以指定的尺寸(以像素计)创建新的 ImageData 对象:

var imgData=cxt.createImageData(width,height);

一个新的具体特定尺寸的ImageData对像。所有像素被预设为透明黑。
例子:
下面的代码中,我创建了一个100*100像素的 ImageData 对象,然后为每个像素添加颜色

var imgData=cxt.createImageData(100,100); for(var i=0;i<imgData.data.length;i+=4){ imgData.data[i+0]=255; imgData.data[i+1]=0; imgData.data[i+2]=0; imgData.data[i+3]=255; } cxt.putImageData(imgData,10,10);


//第一个像素变为红色

data[0]=255; //R

data[1]=0; //G

data[2]=0; //B

data[3]=255; //A

2. 2 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象(不会复制图像数据):

var imgData=cxt.createImageData(imageData);


三、得到场景像素数据

cxt.getImageData(x,y,width,height);

x 开始复制的左上角位置的 x 坐标(以像素计)。 y 开始复制的左上角位置的 y 坐标(以像素计)。 width 要复制的矩形区域的宽度。 height 要复制的矩形区域的高度。

例子:颜色反转

var img=new Image(); img.src="mm.jpg"; img.onload=function(){ cxt.drawImage(img,10,10); var imgData=cxt.getImageData(10,10,200,300); var data=imgData.data; for(var i=0;i<data.length;i+=4){ data[i]=255-data[i]; data[i+1]=255-data[i+1]; data[i+2]=255-data[i+2]; data[i+3]=255; } cxt.putImageData(imgData,230,10); }


是不是很有透视感呢。

四、在场景中写入像素数据

cxt.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

imgData 规定要放回画布的 ImageData 对象。 x ImageData 对象左上角的 x 坐标,以像素计。 y ImageData 对象左上角的 y 坐标,以像素计。 dirtyX 可选。水平值(x),以像素计,在画布上放置图像的位置。 dirtyY 可选。垂直值(y),以像素计,在画布上放置图像的位置。 dirtyWidth 可选。在画布上绘制图像所使用的宽度。 dirtyHeight 可选。在画布上绘制图像所使用的高度。



关注”全栈技术杂货铺“

全栈技术杂货铺