## 第二課時：像素處理 通過`getImageData()`方法和`putImageData()`方法，可以處理每個像素，進而操作圖像內容，因此可以改寫圖像。 下面是圖像處理的通用寫法。 ~~~ if (canvas.width > 0 && canvas.height > 0) { var imageData = context.getImageData(0, 0, canvas.width, canvas.height); filter(imageData); context.putImageData(imageData, 0, 0); } ~~~ 上面代碼中，`filter`是一個處理像素的函數。以下是幾種常見的`filter`。 ### （1）灰度效果 灰度圖（grayscale）就是取紅、綠、藍三個像素值的算術平均值，這實際上將圖像轉成了黑白形式。 ~~~ grayscale = function (pixels) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { var r = d[i]; var g = d[i + 1]; var b = d[i + 2]; d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3; } return pixels; }; ~~~ 上面代碼中，`d[i]`是紅色值，`d[i+1]`是綠色值，`d[i+2]`是藍色值，`d[i+3]`是 alpha 通道值。轉成灰度的算法，就是將紅、綠、藍三個值相加后除以3，再將結果寫回數組。 ### （2）復古效果 復古效果（sepia）是將紅、綠、藍三種值，分別取這三個值的某種加權平均值，使得圖像有一種古舊的效果。 ~~~ sepia = function (pixels) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { var r = d[i]; var g = d[i + 1]; var b = d[i + 2]; d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189); // red d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168); // green d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131); // blue } return pixels; }; ~~~ ### （3）紅色蒙版效果 紅色蒙版指的是，讓圖像呈現一種偏紅的效果。算法是將紅色通道設為紅、綠、藍三個值的平均值，而將綠色通道和藍色通道都設為0。 ~~~ var red = function (pixels) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { var r = d[i]; var g = d[i + 1]; var b = d[i + 2]; d[i] = (r + g + b)/3; // 紅色通道取平均值 d[i + 1] = d[i + 2] = 0; // 綠色通道和藍色通道都設為0 } return pixels; }; ~~~ ### （4）亮度效果 亮度效果（brightness）是指讓圖像變得更亮或更暗。算法將紅色通道、綠色通道、藍色通道，同時加上一個正值或負值。 ~~~ var brightness = function (pixels, delta) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { d[i] += delta; // red d[i + 1] += delta; // green d[i + 2] += delta; // blue } return pixels; }; ~~~ ### （5）反轉效果 反轉效果（invert）是指圖片呈現一種色彩顛倒的效果。算法為紅、綠、藍通道都取各自的相反值（`255 - 原值`）。 ~~~ invert = function (pixels) { var d = pixels.data; for (var i = 0; i < d.length; i += 4) { d[i] = 255 - d[i]; d[i + 1] = 255 - d[i + 1]; d[i + 2] = 255 - d[i + 2]; } return pixels; }; ~~~