Canvas系列之一——濾鏡效果

Canvas 真的是一個神奇的東西，不只可以繪製各類圖形、文本和位圖，還可以對位圖進行復雜的像素運算和處理。所以像濾鏡這些東西，其實 Canvas 也能夠來實現。接下來，是見證奇蹟的時刻。

首先，咱們須要有一個 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);	// 第一個800表示繪製圖片的寬，第二個800表示繪製圖片的高
}
複製代碼

Canvas首次繪製的效果

​

再接下來就是對圖片的像素進行一些操做。而要實現這樣的操做，首先須要從 Canvas 獲取到圖片的像素信息，而獲取這些信息能夠經過getImageData()來實現。

// ... 省略前面代碼
img.onload = (e) => {
	// ... 省略前面代碼
    img = ctx.getImageData(0, 0, 800, 800);	// 得到包含每一個像素點顏色的字節數據
}
複製代碼

因爲圖片的大小爲 800 * 800，由於要對像素點進行遍歷，以得到每個像素點的紅、綠、藍色值。所以：

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

經過上面循環，咱們獲取到了包含在圖片數據中的每一個像素點的具體色值；須要注意的一點是，每個像素點的數據不是一位，而是相鄰的四位，分別表明了該點的紅、綠、藍和透明值。所以，實際上位圖字節數據的數組長度等於像素點個數乘以 4，在 for 循環中咱們也針對這一特性進行了相應處理。

經過將每一點的紅、綠、藍值進行平均，而後再將生成的平均值相同地賦予該像素點的紅、綠、藍值，就能造成灰度效果，最後經過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第二次繪製圖片-灰度效果

透明度的控制只須要修改第四個字節單位對應的數值便可，該數值的範圍爲0~256，0表明徹底透明，256表明完成不透明。例如：

// ... 省略前面代碼
img.onload = (e) => {
	// ... 省略前面代碼
    for(var i = 0; i < pixelLen * 4; i += 4) {
   		// ... 省略前面代碼
        img.data[i + 3] = 128;	// 透明度50%
    }
    // ... 省略前面代碼
} 

複製代碼

Canvas第三次繪製效果-增長透明度

由此，經過控制圖片中每一個像素4個數據的值，便可達到濾鏡的效果，是否是 so easy！

參考文獻：

《HTML5 基礎知識、核心技術與前沿案例》 劉歡 編著