canvas像素操作

最新推荐文章于 2024-08-15 15:01:02 发布

weixin_33781606

最新推荐文章于 2024-08-15 15:01:02 发布

阅读量466

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/3025521

版权

2019独角兽企业重金招聘Python工程师标准>>>

我们可以通过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>

查看效果

转载于:https://my.oschina.net/u/2612473/blog/3025521