阅读(4k) 书签赞(1) 我要纠错

Canvas入门基础（七）：像素操作

2018-06-19 14:40 更新

一、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 可选。在画布上绘制图像所使用的高度。

以上内容是否对您有帮助：

← Canvas入门基础（六）：合成与裁剪

Canvas入门基础（八）：保存文件 →

写笔记

我要补充