html5的canvas的圖片處理之像素轉(zhuǎn)換

html5 canvas圖像轉(zhuǎn)換成數(shù)組

html5的canvas可以進(jìn)行圖片處理，圖片是由像素組成的。我們知道canvas有方法getImageData，返回的對象中可以取出，image的data 數(shù)組（類似數(shù)組的Type Array類型數(shù)組，Uint8ClampedArray）。

假設(shè)canvas寬高是500*400，那么應(yīng)該有200000個像素點(diǎn)，而通過getImageData().data獲取的data數(shù)組的length是800000。我們還知道rgba表示顏色的方法，r=red，g=green，b=blue，a=alpha；即紅綠藍(lán)三原色和透明值。

所以這個data數(shù)組是每四個數(shù)組值代表一個像素點(diǎn)。這樣一來，一個圖像就轉(zhuǎn)化成了數(shù)據(jù)表示的數(shù)組。如下面的代碼：

var canvas = document.getElementById('canvas');
var ctxt = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
	ctxt.drawImage(img, 0, 0);
	var data = ctxt.getImageData(0, 0, 480, 480).data;
	console.log(data, data.toString());
}
img.src = 'img/pic.jpg';

圖像數(shù)組的遍歷

如上面的代碼，我們可以看到數(shù)組data就是圖片轉(zhuǎn)換成的數(shù)組，那么遍歷這個數(shù)組就可以取得圖片的像素點(diǎn)內(nèi)容：

var data = ctxt.getImageData(0, 0, 480, 480).data;
for(var i =0,len = data.length; i<len;i+=4){
	var red = data[i],
		green = data[i+1],
		blue = data[i+2],
		alpha = data[i+3];
 
}

圖片顏色反轉(zhuǎn)

顏色反轉(zhuǎn)的算法就是三原色求反，即255-原色。所以有了下面的方法：

function draw(img){
	ctxt.clearRect(0, 0, 480, 480);
	// console.log(img);
	ctxt.putImageData(img,0,0);
}
 
function invert(){
	var back = ctxt.createImageData(480, 480);
	var arr = back.data;
 
	for(var i=0,len = data.length;i<len;i+=4){
		var red = data[i],
			green = data[i+1],
			blue = data[i+2],
			alpha = data[i+3];
 
		arr[i] = 255-red;
		arr[i+1] = 255-green;
		arr[i+2] = 255-blue;
		arr[i+3] = alpha;
	}
	return back;
}
//顏色反轉(zhuǎn)
draw(invert());

顏色一些算法

去色：把圖片變成黑白圖，只要把每個像素的R、G、B設(shè)為亮度（Y）的值就行了。關(guān)于R、G、B、Y的關(guān)系可以看到這里看看，這里只要記住這條公式：Y = 0.299R + 0.587G + 0.114B，使用位：(R* 4899 + G * 9617 + B* 1868 + 8192) >> 14，速度會快
反相（反轉(zhuǎn)）：就是將一個顏色換成它的補(bǔ)色。補(bǔ)色就是用255（8位通道模式下，255即2的8次方，16位要用65535去減，即2的16次方）減去它本身得到的值：R(補(bǔ)) = 255 – R。

其他算法需要基色和混合色配合可以參考：http://wenku.baidu.com/view/275f9c4769eae009581bec56.html