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