canvas像素操做

时间 2019-11-19

标签 canvas 像素繁體版

原文原文链接

咱们能够经过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中html

ImageData对象中存储着canvas对象真实的像素数据，包含如下几个只读属性
width : 图片宽度，单位是像素
height: 图片高度，单位是像素
data:Uint8ClampedArray （8为无符号整型固定数组）类型的一维数组，包含着GRBA格式的整型数据，范围在0至255之间（包括255）jquery

data属性能够被使用做为查看初始像素数据。每一个像素用4个1bytes的值来表明(RGBA格式，红色R的索引是0位置)，像素的索引也是从0开始canvas

例如，要读取图片汇总位于第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];app

获取Uint8ClampedArray 的长度
var numBytes = imageData.data.length;this

如何建立一个ImageData对象？code

var myImageData = ctx.createImageData(width,height)htm

上面代码建立了一个新的具体特定尺寸的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>

查看效果