使用 Javascript 讓區塊或圖片變成灰階

一段時間沒有寫文章了，算了算時間… 剛好是一個月，這麼久沒有寫文的結果就是忘了該怎麼寫文，所以就來寫個簡單的前端 Javascript 應用來暖暖身，這是我工作的專案中實際碰到的情況與解決方式，目前的專案中有一個區塊是依據會員的等級來顯示某些產品圖片，客戶主管想要讓更多的圖片可以顯示在區塊中，為了想要讓圖片做出區隔，於是就決定讓符合會員等級的產品圖片就還是以彩色顯示，而尚未符合等級的產品圖片就用灰階顯示，一開始的構想是如果要以灰階顯示產品圖片，就在處理產品圖片上傳的時候，以 C# 程式來產生一張灰階的圖片檔，但是專案已經有一堆的產品圖片資料了，不可能因為要做這個灰階顯示而讓既有的產品圖片重新上傳一次來產生灰階圖片檔案，或是另外寫程式去處理灰階檔案的產生，而且萬一以後客戶的需求不再只是圖片灰階顯示，而是想要讓顯示產品資訊的區塊也做灰階處理時，上述的方式就只是做一半而已…

於是就想到可以用前端的 Javascript 來處理這一個需求，但是 google 相關的 Javascript 套件都是會用到 HTML5 的 Canvas，為了避免客戶端無法顯示灰階效果的情況發生，所以就不能使用這些用到 Canvas 的套件，最後找到的就是「grayscale.js」這個套件，可以確保在 IE6 中正常顯示灰階效果。

---

grayscale.js

作者說明：http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

DEMO：http://james.padolsey.com/demos/grayscale/

grayscale.js 下載：http://james.padolsey.com/demos/grayscale/grayscale.js

建議各位先進入 DEMO 網站看看就可以明白這個「grayscale.js」是做什麼的，

 

正常的顯示

灰階顯示處理

DEMO 網站的示範不只是將圖片改以灰階顯示，而是將區塊改以灰階顯示處理。

 

基本使用：圖片灰階顯示

以下是四張圖的原始狀態，而我們要將這四張圖片使用 grayscale.js 後以灰階顯示，

首先我先將這四張圖都加上同樣的 class，

然後加入 jquery.js 以及 grayscale.js

而在 Javascript 的程式中，在 grayscale() 中用 jquery 把有 greyScale 這個 class 的 img element 給選起來，

最後重新載入原本的網頁，就可以看到結果囉～

我們在 IE6 中來看看這個 grayscale.js 的效果是否可以正常顯示…

結論是，在 IE6 的環境下是沒有問題的！

 

基本使用：區塊灰階顯示

接下來我們來試試看將區塊（div）的內容使用 grayscale.js 做灰階顯示處理，其實很簡單，就是把原本在 Javascript 程式中所指定灰階顯示處理的目標改為 div 的 ID

最後的顯示結果，

原本 Image1 ~ Image4 的字都有顏色標示，也都轉為灰階顯示了。

 

進階應用：hover 效果

這邊要做的是，一開始進入網頁後，四張圖以灰階顯示，當滑鼠游標移到圖片上面就顯示原圖，而滑鼠游標離開圖片後就恢復到灰階顯示。其實這沒有什麼比較難的地方，關鍵的地方就在於 grayscale.js 提供了一個 reset() 的方法，這個方法就是讓已經灰階顯示處理的圖片給恢復到原本彩色顯示的樣子，

Javascript 程式內容：

一開始進入網頁就將圖片做灰階顯示處理，然後 class 為 greySacle 的 img element 給予 hover 事件處理，游標移到圖片上面時，就使用 grayscale.reset()，讓圖片恢復到彩色顯示，游標離開圖片後，要讓圖片恢復為灰階顯示，就再使用 grayscale() 將圖片恢復為灰階。

一開始進入網頁，圖片都是灰階顯示，

滑鼠游標移到 image2 上面，image2 就恢復為彩色顯示，

滑鼠游標離開 image2 後，image2 就回復為灰階顯示（此時游標移到 Image4，Image4 就變成彩色顯示）

 

---

一個簡單的前端程式應用介紹給大家，其實很多開發 ASP.NET 的朋友都很不熟悉前端程式的應用，像是這一篇的應用，我想會有一大部分的 ASP.NET 開發者都會想到在後端程式去實際產生一個灰階圖片，並不是說這方法不好，而是一個已經上線的專案，為了要達到所有圖片都有灰階的圖檔，勢必要花很多時間去產生圖檔，如果真的要有 hover 效果的話，就要多載入一個圖檔來做灰階與彩色的切換，開發以及上線後所耗費的時間與運作成本都相當大，有時候 ASP.NET 開發人員不必要一直在 Server Control 上面打轉，可以跳脫出來，像是這種灰階顯示的效果，改用前端程式來解決，原本的 ASP.NET 程式碼不必做太大的改變，而運作成本也不會造成 Server 端的負擔，因為灰階處理都交由使用者的 Client 端了。

 

以上