今晚本來想發「hybrid系列的jssdk文章」，但是被耽擱了，只寫了一半，還沒有完成。昨天朋友問js處理圖片的問題，想起之前寫過一篇canvas處理圖片的文章，於是整理髮了出來。下週文章預告：「hybrid系列的jssdk文章」
html5 canvas影象轉換成陣列
html5的canvas可以進行圖片處理，圖片是由畫素組成的。我們知道canvas有方法 getImageData，返回的物件中可以取出，image的data 陣列（類似陣列的Type Array型別陣列，Uint8ClampedArray）。
假設canvas寬高是500*400，那麼應該有200000個畫素點，而通過 getImageData().data獲取的data陣列的 length是800000。
我們還知道rgba表示顏色的方法：
r=red，0~255
g=green，0~255
b=blue，0~255
a=alpha，0~100
即紅綠藍三原色和透明值。
所以這個data陣列是每四個陣列值代表一個畫素點。這樣一來，一個影象就轉化成了資料表示的陣列。如下面的程式碼：
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';複製程式碼
這裡需要注意，圖片src符合同源策略，即不可以跨域請求。
影象陣列的遍歷
如上面的程式碼，我們可以看到陣列data就是圖片轉換成的陣列，那麼遍歷這個陣列就可以取得圖片的畫素點內容：
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];複製程式碼
}複製程式碼
圖片顏色反轉
顏色反轉的演算法就是三原色求反，即 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;複製程式碼
}複製程式碼
//顏色反轉複製程式碼
draw(invert());複製程式碼
顏色一些演算法
去色
把圖片變成黑白圖，只要把每個畫素的R、G、B設為亮度（Y）的值就行了。
關於R、G、B、Y的關係可以看到這裡看看，這裡只要記住這條公式： Y = 0.299R + 0.587G + 0.114B，使用位： (R* 4899 + G * 9617 + B* 1868 + 8192) >> 14，速度會快
反相（反轉）
就是將一個顏色換成它的補色。
補色就是用255（8位通道模式下，255即2的8次方，16位要用65535去減，即2的16次方）減去它本身得到的值： R(補) = 255 – R。
其他演算法需要基色和混合色配合可以參考：http://wenku.baidu.com/view/275f9c4769eae009581bec56.html
未經允許，請勿轉載。
掘金更新比公眾號晚一週左右。