透過畫布套用圖片濾鏡

引言

HTML5 畫布元素可用來撰寫圖片濾鏡。您需要的做法是在畫布上繪製圖片、讀取畫布像素，然後對其執行篩選器。接著，您可以將結果寫入新的畫布 (或堆積，只要使用舊的畫布即可)。

聽起來很簡單嗎？那就好！開始動工！

正在處理像素

首先，擷取圖片像素：

Filters = {};
Filters.getPixels = function(img) {
var c = this.getCanvas(img.width, img.height);
var ctx = c.getContext('2d');
ctx.drawImage(img);
return ctx.getImageData(0,0,c.width,c.height);
};

Filters.getCanvas = function(w,h) {
var c = document.createElement('canvas');
c.width = w;
c.height = h;
return c;
};

接下來，我們需要篩選圖片如何使用 filterImage 方法擷取篩選器和圖片並傳回已篩選的像素？

Filters.filterImage = function(filter, image, var_args) {
var args = [this.getPixels(image)];
for (var i=2; i<arguments.length; i++) {
args.push(arguments[i]);
}
return filter.apply(null, args);
};

執行簡單的篩選器

將像素處理管道整合在一起後，就可以開始編寫一些簡單的篩選器了。首先，我們會將圖片轉換為灰階。

Filters.grayscale = function(pixels, args) {
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];
// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};

為像素新增固定值，即可調整亮度：

Filters.brightness = function(pixels, adjustment) {
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
d[i] += adjustment;
d[i+1] += adjustment;
d[i+2] += adjustment;
}
return pixels;
};

圖片門檻也很簡單。您只需比較像素的灰階值與門檻值，然後根據該值設定顏色即可：

Filters.threshold = function(pixels, threshold) {
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];
var v = (0.2126*r + 0.7152*g + 0.0722*b >= threshold) ? 255 : 0;
d[i] = d[i+1] = d[i+2] = v
}
return pixels;
};

連續圖片

卷積濾鏡是處理圖片時相當實用的一般篩選器。基本概念是，您將來源圖片中像素矩形的體重總和，並將該數字做為輸出值。卷積濾鏡可用於模糊、銳化、壓紋、邊緣偵測及其他許多項目。

Filters.tmpCanvas = document.createElement('canvas');
Filters.tmpCtx = Filters.tmpCanvas.getContext('2d');

Filters.createImageData = function(w,h) {
return this.tmpCtx.createImageData(w,h);
};

Filters.convolute = function(pixels, weights, opaque) {
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side/2);
var src = pixels.data;
var sw = pixels.width;
var sh = pixels.height;
// pad output by the convolution matrix
var w = sw;
var h = sh;
var output = Filters.createImageData(w, h);
var dst = output.data;
// go through the destination image pixels
var alphaFac = opaque ? 1 : 0;
for (var y=0; y<h; y++) {
for (var x=0; x<w; x++) {
  var sy = y;
  var sx = x;
  var dstOff = (y*w+x)*4;
  // calculate the weighed sum of the source image pixels that
  // fall under the convolution matrix
  var r=0, g=0, b=0, a=0;
  for (var cy=0; cy<side; cy++) {
    for (var cx=0; cx<side; cx++) {
      var scy = sy + cy - halfSide;
      var scx = sx + cx - halfSide;
      if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
        var srcOff = (scy*sw+scx)*4;
        var wt = weights[cy*side+cx];
        r += src[srcOff] * wt;
        g += src[srcOff+1] * wt;
        b += src[srcOff+2] * wt;
        a += src[srcOff+3] * wt;
      }
    }
  }
  dst[dstOff] = r;
  dst[dstOff+1] = g;
  dst[dstOff+2] = b;
  dst[dstOff+3] = a + alphaFac*(255-a);
}
}
return output;
};

3x3 銳利化濾鏡如下。看看其如何聚焦於中心的像素。如要維持圖片的亮度，矩陣值的總和應為 1。

Filters.filterImage(Filters.convolute, image,
[  0, -1,  0,
-1,  5, -1,
  0, -1,  0 ]
);

這是另一個卷積濾鏡的範例，方塊模糊效果。方塊模糊會輸出卷積矩陣內像素值的平均值。做法是建立大小為 NxN 的捲積矩陣，其中每個權重都是 1 / (NxN)。這樣一來，矩陣中的每個像素都會貢獻與輸出圖片相等的容量，權重總和則為 1。

Filters.filterImage(Filters.convolute, image,
[ 1/9, 1/9, 1/9,
1/9, 1/9, 1/9,
1/9, 1/9, 1/9 ]
);

我們可以合併現有篩選器，製作更複雜的圖片濾鏡。例如，可以編寫一個 Sobel 篩選器。Sobel 篩選器會計算圖片的垂直和水平漸層，然後合併計算過的圖片，找出圖片中的邊緣。在這裡實作 Sobel 濾鏡的方法，就是先將圖片灰階處理，然後採用水平和垂直漸層，最後合併漸層圖片，最後組成最終圖片。

就術語而言，此處的「梯度」是指圖片位置的像素值變化。如果像素的左鄰右值為 20，右相鄰值為 50，像素的水平漸層會是 30。垂直漸層的概念相同，但使用上下鄰點。

var grayscale = Filters.filterImage(Filter.grayscale, image);
// Note that ImageData values are clamped between 0 and 255, so we need
// to use a Float32Array for the gradient values because they
// range between -255 and 255.
var vertical = Filters.convoluteFloat32(grayscale,
[ -1, 0, 1,
-2, 0, 2,
-1, 0, 1 ]);
var horizontal = Filters.convoluteFloat32(grayscale,
[ -1, -2, -1,
  0,  0,  0,
  1,  2,  1 ]);
var final_image = Filters.createImageData(vertical.width, vertical.height);
for (var i=0; i<final_image.data.length; i+=4) {
// make the vertical gradient red
var v = Math.abs(vertical.data[i]);
final_image.data[i] = v;
// make the horizontal gradient green
var h = Math.abs(horizontal.data[i]);
final_image.data[i+1] = h;
// and mix in some blue for aesthetics
final_image.data[i+2] = (v+h)/4;
final_image.data[i+3] = 255; // opaque alpha
}

還有許多其他酷炫的捲積濾鏡，等著你來發掘。 例如嘗試在上述卷積中實作Laplace 濾鏡，看看會有什麼效果。

結語

希望本篇簡短的文章能介紹如何使用 HTML 畫布標記，在 JavaScript 中編寫圖片篩選器的基本概念。我想鼓勵您採用更多圖片濾鏡，真是太棒了！

如果篩選器需要更出色的效能，通常可以移植篩選器，使用 WebGL 片段著色器進行圖片處理。透過著色器，您可以即時執行最簡單的篩選器，以便用於後續處理影片和動畫。