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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。