Canvas系列之濾鏡效果
我要評(píng)論Canvas 真的是一個(gè)神奇的東西，不僅能夠繪制各種圖形、文本和位圖，還能夠?qū)ξ粓D進(jìn)行復(fù)雜的像素運(yùn)算和處理。因此像濾鏡這些東西，其實(shí) Canvas 也可以來實(shí)現(xiàn)。接下來，是見證奇跡的時(shí)刻。
首先，我們需要有一個(gè) Canvas 容器，例如：
<canvas id="myCanvas" width="800" height="800"></canvas>
接下來，我們需要將使用 Canvas 來繪制一張圖片:
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var img = new Image();
img.src = "./images/1526010092000.jpg"; // 自備圖片鏈接
img.onload = (e) => {
ctx.drawImage(img, 0, 0, 800, 800); // 第一個(gè)800表示繪制圖片的寬，第二個(gè)800表示繪制圖片的高
}
Canvas首次繪制的效果
再接下來就是對(duì)圖片的像素進(jìn)行一些操作。而要實(shí)現(xiàn)這樣的操作，首先需要從 Canvas 獲取到圖片的像素信息，而獲取這些信息可以通過 getImageData() 來實(shí)現(xiàn)。
// ... 省略前面代碼
img.onload = (e) => {
// ... 省略前面代碼
img = ctx.getImageData(0, 0, 800, 800); // 獲得包含每個(gè)像素點(diǎn)顏色的字節(jié)數(shù)據(jù)
}
由于圖片的大小為 800 * 800，因?yàn)橐獙?duì)像素點(diǎn)進(jìn)行遍歷，以獲得每一個(gè)像素點(diǎn)的紅、綠、藍(lán)色值。因此：
// ... 省略前面代碼
img.onload = (e) => {
// ... 省略前面代碼
var pixelLen = 800 * 800; // 獲得像素個(gè)數(shù)
for(var i = 0; i < pixelLen * 4; i += 4) {
var redC = img.data[i], // 第一個(gè)字節(jié)單位代表紅色
greenC = img.data[i + 1], // 第二個(gè)字節(jié)單位代表綠色
blueC = img.data[i + 2], // 第三個(gè)字節(jié)單位代表藍(lán)色
alpha = img.data[i + 3]; // 第四個(gè)字節(jié)單位代表透明度
}
}
通過上面循環(huán)，我們獲取到了包含在圖片數(shù)據(jù)中的每個(gè)像素點(diǎn)的具體色值；需要注意的一點(diǎn)是，每一個(gè)像素點(diǎn)的數(shù)據(jù)不是一位，而是相鄰的四位，分別代表了該點(diǎn)的紅、綠、藍(lán)和透明值。因此，實(shí)際上位圖字節(jié)數(shù)據(jù)的數(shù)組長(zhǎng)度等于像素點(diǎn)個(gè)數(shù)乘以 4，在 for 循環(huán)中我們也針對(duì)這一特性進(jìn)行了相應(yīng)處理。
通過將每一點(diǎn)的紅、綠、藍(lán)值進(jìn)行平均，然后再將生成的平均值相同地賦予該像素點(diǎn)的紅、綠、藍(lán)值，就能形成灰度效果，最后通過 putImageData() 方法來重新繪制圖片即可，代碼如下：
// ... 省略前面代碼
img.onload = (e) => {
// ... 省略前面代碼
for(var i = 0; i < pixelLen * 4; i += 4) {
// ... 省略前面代碼
var grey = parseInt((redC + greenC + blueC) / 3); // 平均后獲取灰度值
img.data[i] = grey; // 改變紅色值
img.data[i + 1] = grey; // 改變綠色值
img.data[i + 2] = grey; // 改變藍(lán)色值
}
ctx.putImageData(img, 0, 0, 800, 800); // 重新繪制圖片
}
此時(shí)，則會(huì)形成灰度效果，如下圖
Canvas第二次繪制圖片-灰度效果
透明度的控制只需要修改第四個(gè)字節(jié)單位對(duì)應(yīng)的數(shù)值即可，該數(shù)值的范圍為0~256，0代表完全透明，256代表完成不透明。例如：
// ... 省略前面代碼
img.onload = (e) => {
// ... 省略前面代碼
for(var i = 0; i < pixelLen * 4; i += 4) {
// ... 省略前面代碼
img.data[i + 3] = 128; // 透明度50%
}
// ... 省略前面代碼
}
Canvas第三次繪制效果-增加透明度
由此，通過控制圖片中每個(gè)像素4個(gè)數(shù)據(jù)的值，即可達(dá)到濾鏡的效果，是不是 so easy！
參考文獻(xiàn)：
《HTML5 基礎(chǔ)知識(shí)、核心技術(shù)與前沿案例》 劉歡 編著
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
canvas學(xué)習(xí)和濾鏡實(shí)現(xiàn)代碼
這篇文章主要介紹了canvas學(xué)習(xí)和濾鏡實(shí)現(xiàn)代碼，利用 canvas，前端人員可以很輕松地、進(jìn)行圖像處理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-22- 這是一個(gè)模擬攝像機(jī)拍攝電視屏幕畫面時(shí)出現(xiàn)點(diǎn)狀顆粒的效果，有興趣研究的朋友可以嘗試更多的效果，代碼沒有經(jīng)過優(yōu)化，只是一個(gè)粗糙的Demo，喜歡的朋友可以研究下2013-11-05
