利用HTML5 Canvas做在線圖像處理

HTML 5中的 canvas 元素是相當強大的，利用他的 getImageData 方法可以對載入的圖像直接進行位圖操作。但是直接對位圖進行操作比較麻煩，如果利用卷積矩陣這個工具的話，可以通過幾個簡單的參數實現復雜的效果。

所謂的矩陣的卷積，就是如下圖顯示的那樣，當計算紅色框中的數值的時候，分別先提取周圍綠框中8個數字，然後與施加的那個矩陣中對應位置相乘，然後把各個乘積加在一起，就得到了最終的值了。

比如上圖中的42是這麼來的:

  (40*0)+(42*1)+(46*0) 
+ (46*0)+(50*0)+(55*0) 
+ (52*0)+(56*0)+(58*0) 
= 42

這就是卷積了。然後，所謂的對圖像的卷積操作，就是指對圖像上的每一點的像素值，用這個矩陣進行運算，得到一個新的值。

比如下面這張圖

利用下面這個矩陣 
-6 -3 0 
-3 -1 3 
0 3 6 
就立刻能夠得到浮雕效果。

然後為了使用更方便，通常還會給最終值除以一個系數以及加上一個偏移。 
比如下面這個矩陣。 
0 0 0 
0 1 0 
0 0 0 
這個矩陣（實際上這個矩陣本身不對圖像進行任何操作），然後設置系數為-1，偏移為255的話，就能實現反色效果了，真是相當的神奇。

為了簡化操作，我寫了個簡單的函數來對圖像數據進行操作。 
函數第一個參數是 canvas上的 imageData 對象 
第二個參數是傳入矩陣所對應的數組，如果是下面這樣的矩陣 
a b c 
d e f 
g h i 
則傳入第二個的參數應為 [a,b,c,d,e,f,g,h,i] 
第三個參數是除數因子。 
第四個參數就是偏移量。