HTML 5 Canvas濾鏡預研
Canvas濾鏡預研
最近小花對Q拍的濾鏡效果很感興趣，折騰了一下，其實用canvas也可以模擬這些效果。
先看個demo:
***體驗配置：pc用chrome或safari打開或iPad/iPad2/iPhone4打開這里 。
純web圖形處理與native app圖形處理的區別，這里就不闡述了。歡迎大家討論。
以下為全文：
HTML5 的canvas相信大家早有聽聞，不支持flash的IOS設備要對圖形處理可以用它來實現。canvas API內容挺多的，以下只是抽取部分屬性和方法來闡述，拋磚引玉一下。
本文的主要內容是： canvas的簡單圖形處理，其中包括編碼讀寫、像素級處理以及簡單用法。這些操作都是在客戶端處理的。
***. 要進行圖片處理，首先考慮的應該是編碼的讀寫。
1. 來看一下canvas是怎樣讀取圖片。
這里要留意了，有些同學開始玩canvas的時候死活讀不進圖片，原因在于：你得首先讓圖片加載進來，因為程序跑得比圖片加載快。
這里有必要了解一下，canvas畫布的概念，簡單可以描述為： 用canvas.getContext（“2d”）方法來獲取一個2d畫布，畫布有自身的方法。用這些方法就可以在畫布上面亂涂拉！
其中drawImage是用來把圖片“涂”進來的,它有3個函數原型
關于這三個方法，看了下面這個圖就會明白：
其實看起來還是有點糾結，沒關系，我們這里重點在于***句，因為本來就是想著圖片處理，那把canvas的寬度設成圖片的寬高，然后把圖片讀進來放在canvas畫布ctx的左上角就OK拉。說白了，就是讀取圖片的時候就是： 做一個跟圖片看起來一模一樣的canvas。
這樣，很簡單就把圖片讀進來了！Amazing！
2. canvas怎樣輸出編碼？
當你用畫布的方法亂涂亂畫之后，用以下方法可以很簡單輸出圖片編碼：
這方法是canvas對象的，不是畫布的。type可以在image/png，image/jpeg,image/svg+xml等 MIME類型中選擇。如果是image/jpeg，可以有第二個參數，如果第二個參數的值在0-1之間，則表示JPEG的質量等級，否則使用瀏覽器內置默認質量等級。
以下以” image/png”為例，可以輸出一段這樣的字符串：
這是一段灰常灰常長的字符串！他叫Data URI。
注意.假如開始用drawImage“涂”進來的圖片的src地址是跨域的（例如，網頁放在a.com而圖片的地址是b.com/c.jpg）,這樣的話，這個toDataUrl方法會報錯。
那怎么辦呢？蛋定，其實在需要處理這種圖片時，先把它放到自己服務器轉成同域就好了（可線下一起研究轉換方法）。
這樣，很簡單就把圖片輸出來了！Unbelievable！
#p#
第二. 什么是canvas的像素級處理呢？
大家可以先看抽離出來的demo:
1. 圖像的像素點是怎么存儲的？
在進行圖像處理前，得先了解一下圖像是怎么存儲每一個像素點的數據的。
看個圖先：
玩css3的同學知道一個新的顏色定義方式—rgba,這里說的跟這個很像。
簡單的像素點存儲其實把每個像素點用四個數字來存儲，分別是R（紅）、G（綠）、B（藍）、A（不透明度），然后這里的A值跟不透明度存在一個關系，60%=153/255，即不透明度=A值/255。
通過改變每個像素點的這四個維度，我們可以達到改變純度，透明度，色相，亮度等所有效果，這是濾鏡的基礎原理，玩ps的盆友也許更熟悉這塊。
2. Canvas怎么讀寫所有像素點數據？
a) 讀取
畫布的方法：getImageData可以獲取指定范圍內的像素點數據。參數x、y為起始位置，w、h為范圍寬高。
該方法將返回形如以下的對象：
上圖對應的是存儲兩個像素點數據的對象，對象中含有一個叫data的數組，其每四個鍵值對，存儲一個像素點的數據，像素點從左到右排列。
b) 寫入
畫布的方法：putImageData可以把指定像素點數據對象（getImageData返回的對象），填充到指定位置，x、y為開始填充點。
第三. 用法？
了解上述原理和方法之后，只要遍歷取出的像素點對象，再按指定的算法來改變每個像素點的數據，再把對象重繪到畫布。
然后canvas對象來輸出編碼（***點），就能達到濾鏡效果了。
效果的好壞主要取決于算法的好壞。
需要提醒的是，canvas的像素級處理比較耗費資源，但是對于寬高不是太大的圖片，速度還是可以接受的。
這里順帶介紹一下QST庫里頭關于這個濾鏡效果插件的簡單使用：
其中preloaded為預載效果數量（由于對于某個圖片，效果被渲染后會自動緩存在js對象里頭，而執行渲染時需要時間，所以需要預載部分效果）。其他更詳細參數，有興趣的同學可線下交流。
