如何進(jìn)行HTML 5 Canvas濾鏡預(yù)研

本篇文章給大家分享的是有關(guān)如何進(jìn)行HTML 5 Canvas濾鏡預(yù)研，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

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畫(huà)布的概念，簡(jiǎn)單可以描述為： 用canvas.getContext（“2d”）方法來(lái)獲取一個(gè)2d畫(huà)布，畫(huà)布有自身的方法。用這些方法就可以在畫(huà)布上面亂涂拉！

其中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畫(huà)布ctx的左上角就OK拉。說(shuō)白了，就是讀取圖片的時(shí)候就是： 做一個(gè)跟圖片看起來(lái)一模一樣的canvas。

這樣，很簡(jiǎn)單就把圖片讀進(jìn)來(lái)了！Amazing！

2. canvas怎樣輸出編碼？

當(dāng)你用畫(huà)布的方法亂涂亂畫(huà)之后，用以下方法可以很簡(jiǎn)單輸出圖片編碼：

這方法是canvas對(duì)象的，不是畫(huà)布的。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！

第二. 什么是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)     讀取

畫(huà)布的方法：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)     寫入

畫(huà)布的方法：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ì)象重繪到畫(huà)布。

然后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ù)載部分效果）。

以上就是如何進(jìn)行HTML 5 Canvas濾鏡預(yù)研，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。