Lena.js是一個簡單易用的影像處理類別庫，內建了一些常見的濾鏡，可以用來補齊CSS濾鏡的不足，又不用擔心使用上太過困難，只要簡單幾行程式碼就可以套用濾鏡了。今天就來簡單玩玩Lena.js吧！

開始使用 Lena.js

Lena支援以下多種濾鏡：

• gaussian
• grayscale
• highpass
• invert
• laplacian
• prewitt
• rgb
• roberts
• saturation
• sepia
• sharpen
• sobel
• thresholding
• lowpass 3x3
• lowpass 5x5

Lenajs是一個簡單的JS檔，我們可以透過npm安裝，也可以透過rawgit把GitHub上的原始檔轉為CDN，在網頁中引入後，我們會需要兩個元素，一個是圖片的來源，一個是要套用濾鏡的canvas元素

<!-- 原始圖片的來源 -->
<img id="original-image" src="..." />
<!-- 之後會透過lenajs將圖片轉換到這裡 -->
<canvas id="filtered-image"></canvas>

接下來就是套用濾鏡啦！

簡單套個invert看看

const originalImage = document.getElementById("original-image");
const filteredImageCanvas = document.getElementById("filtered-image");

LenaJS.filterImage(filteredImageCanvas, LenaJS.invert, originalImage);

上面程式中，我們使用LenaJS.filterImage()來進行濾鏡的套用，至於要套用什麼濾鏡呢，就是LenaJS.invert，完成後，就來看看結果吧！

原來的圖：

套用濾鏡後

是不是非常簡單啊！只有三行程式碼，而且真正套用的邏輯只有一行，就完成濾鏡套用囉。

套用多個濾鏡

Lena.js也能一次套用多個濾鏡，來達到更多不同的風格，例如我們想要達成手繪風格，可以組合highpass、grayscale和invert，來達到手繪風格的濾鏡效果：

const originalImage = document.getElementById("original-image");
const filteredImageCanvas = document.getElementById("filtered-image");

LenaJS.filterImage(filteredImageCanvas, LenaJS.highpass, originalImage);
  
LenaJS.redrawCanvas(filteredImageCanvas, LenaJS.grayscale);

LenaJS.redrawCanvas(filteredImageCanvas, LenaJS.invert);

再使用LenaJS.filterImage()把圖片濾鏡效果轉換到canvas上後，我們就可以使用LenaJS.redrawCanvas()直接替canvas套用濾鏡效果。

最終結果如下：

類似資源

• OpenCV.js - OpenCV是大名鼎鼎的開源電腦視覺(Computer Vision)類別庫，而OpenCV.js就是它的JavaScript實作版本，雖然使用上複雜得多，但也相對可以針對影像處理更多複雜的問題。