canvas像素操作 原

时间:2022-06-19
本文章向大家介绍canvas像素操作 原,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

我们可以通过ImageData对象操纵像素数据,直接读取或将数据数组写入该对象中

ImageData对象中存储着canvas对象真实的像素数据,包含以下几个只读属性 width : 图片宽度 ,单位是像素 height: 图片高度,单位是像素 data:Uint8ClampedArray (8为无符号整型固定数组)类型的一维数组,包含着GRBA格式的整型数据,范围在0至255之间(包括255) data属性可以被使用作为查看初始像素数据。每个像素用4个1bytes的值来代表(RGBA格式,红色R的索引是0位置),像素的索引也是从0开始

例如,要读取图片汇总位于第50行,第200列的像素的蓝色部分,是下面的代码

blueComponent = imageData.data[((50-1)*imageData.width + (200-1))*4 - 1 + 3] 解释:(50-1)*imageData.width 指49行总共的像素数,(200-1)第50行的像素数,减1的原因是像素的索引也是从0开始 公式:imageData.data[((行数-1)*imageData.width + (列数-1))*4 - 1 + 1/2/3/4]; 获取Uint8ClampedArray 的长度 var numBytes = imageData.data.length;

如何创建一个ImageData对象?

var myImageData = ctx.createImageData(width,height) 上面代码创建了一个新的具体特定尺寸的ImageData对象。所有像素被预设为透明黑 你也可以创建一个被anotherImageData对象指定的相同像素的ImageData对象。这个新的对象像素全部被预设为透明黑。这个并非复制了图片数据 var myImageData = ctx.createImageData(anotherImageData)

如何得到场景像素数据?

var myImageData = ctx.getImageData(left,top,width,height),坐标点形成坐标空间元素 注意:任何在画布以外的元素都会被返回成一个透明黑的ImageData对象

在场景中写入像素数据

你可以用putImageData()方法去对场景进行像素数据的写入 ctx.putImageData(myImageData,dx,dy)

图片灰度和反相颜色

这下面这个例子里,我们遍历所有像素以改变他们的数值,然后我们将被修改的像素数组通过putImageData()放回到画布中去

完整的反相颜色与图片灰度的例子:

<body >
<canvas id="canvas" width="600" height="300" style=""></canvas>
<button id="invertBtn"> 反色 </button>
<button id="grayscalebtn"> 灰色 </button>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
   var img = new Image();
   img.src = 'images/rhino.jpg';
   img.onload=function(){
     draw(this)
   };
   function draw(img) {
     var canvas = document.getElementById("canvas");
	 var ctx=canvas.getContext("2d");
	 ctx.drawImage(img,0,0);
	 img.style.display = "none";
	 var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
	 var data = imageData.data;
	 var invert = function() {
	   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+1]
	   }
	   ctx.putImageData(imageData,0,0)
	 };
	 
	 var grayscale = function() {
	   
	    for(var i=0;i<data.length;i+=4) {
		  var avg = (data[i]+data[i+1]+data[i+2])/3;
		  data[i] = avg;
		  data[i+1] = avg;
		  data[i+2] = avg
		}
		ctx.putImageData(imageData,0,0)
	 };
	 
	 var invertbtn = document.getElementById("invertBtn");
	 invertbtn.addEventListener("click",invert);
	 var grayscalebtn = document.getElementById("grayscalebtn");
	 grayscalebtn.addEventListener("click",grayscale)
	 
   }
</script>
</body>

查看效果

(adsbygoogle = window.adsbygoogle || []).push({});