這篇文章給大家分享的是有關(guān)Canvas系列中濾鏡效果的實現(xiàn)方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認真做好每個細節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及高空作業(yè)車租賃等，在網(wǎng)站建設(shè)公司、成都營銷網(wǎng)站建設(shè)、WAP手機網(wǎng)站、VI設(shè)計、軟件開發(fā)等項目上具有豐富的設(shè)計經(jīng)驗。

Canvas 真的是一個神奇的東西，不僅能夠繪制各種圖形、文本和位圖，還能夠?qū)ξ粓D進行復(fù)雜的像素運算和處理。因此像濾鏡這些東西，其實 Canvas 也可以來實現(xiàn)。接下來，是見證奇跡的時刻。

首先，我們需要有一個 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);	// 第一個800表示繪制圖片的寬，第二個800表示繪制圖片的高
}

Canvas首次繪制的效果

再接下來就是對圖片的像素進行一些操作。而要實現(xiàn)這樣的操作，首先需要從 Canvas 獲取到圖片的像素信息，而獲取這些信息可以通過 getImageData() 來實現(xiàn)。

// ... 省略前面代碼
img.onload = (e) => {
	// ... 省略前面代碼
    img = ctx.getImageData(0, 0, 800, 800);	// 獲得包含每個像素點顏色的字節(jié)數(shù)據(jù)
}

由于圖片的大小為 800 * 800，因為要對像素點進行遍歷，以獲得每一個像素點的紅、綠、藍色值。因此：

// ... 省略前面代碼
img.onload = (e) => {
	// ... 省略前面代碼
    var pixelLen = 800 * 800;   // 獲得像素個數(shù)
    for(var i = 0; i < pixelLen * 4; i += 4) {
        var redC = img.data[i], // 第一個字節(jié)單位代表紅色
            greenC = img.data[i + 1],    // 第二個字節(jié)單位代表綠色
            blueC = img.data[i + 2],   // 第三個字節(jié)單位代表藍色
            alpha = img.data[i + 3];   // 第四個字節(jié)單位代表透明度
    }
}

通過上面循環(huán)，我們獲取到了包含在圖片數(shù)據(jù)中的每個像素點的具體色值；需要注意的一點是，每一個像素點的數(shù)據(jù)不是一位，而是相鄰的四位，分別代表了該點的紅、綠、藍和透明值。因此，實際上位圖字節(jié)數(shù)據(jù)的數(shù)組長度等于像素點個數(shù)乘以 4，在 for 循環(huán)中我們也針對這一特性進行了相應(yīng)處理。

通過將每一點的紅、綠、藍值進行平均，然后再將生成的平均值相同地賦予該像素點的紅、綠、藍值，就能形成灰度效果，最后通過 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; // 改變藍色值
    }

    ctx.putImageData(img, 0, 0, 800, 800);  // 重新繪制圖片
}

此時，則會形成灰度效果，如下圖

Canvas第二次繪制圖片-灰度效果

透明度的控制只需要修改第四個字節(jié)單位對應(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第三次繪制效果-增加透明度

由此，通過控制圖片中每個像素4個數(shù)據(jù)的值，即可達到濾鏡的效果，是不是 so easy！

感謝各位的閱讀！關(guān)于“Canvas系列中濾鏡效果的實現(xiàn)方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！