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()放回到画布中去

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

代码语言：javascript复制

<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({});

编程算法 canvas

0 人点赞

canvas像素操作 原

canvas像素操作原