以前，在web上要顯示灰階圖檔的話，隻有手工使用圖檔軟體轉換。但是現在借助于html5的canvas可以實作這個過程，而不需要再借助圖檔編輯軟體了。我用html5和jquery做了一個demo，來展示如何實作這個功能。
目的
這個demo将會向你展示用html5和jquery，如何實作滑鼠在圖檔上移動移出時，灰階圖像和原圖之間的切換。在html5出現之前，要實作這個功能就需要準備兩個圖檔，一個灰階圖檔，一個原圖。但是現在借助于html5可以實作的更快更容易，因為灰階圖檔是直接在原圖上生成的。我希望這段js代碼對你在建立檔案或者圖檔陳列功能的時候有幫助作用。
效果圖
下面的jquery代碼将會尋找目标圖檔，并生成一個灰階的版本。當你滑鼠移動到圖檔上時，灰階圖檔會變成原色。
如何使用
依照下面的步驟：
引用jquery.js
複制上面的代碼
設定目标圖檔(eg: <code>.post-img</code>, <code>img</code>, <code>.gallery img</code>, etc.)
你也可以設定動畫的速度(ie. 1000 = 1 second)
相容性
我嘗試了所有支援html5和canvas的浏覽器，例如：Chrome, Safari, 和 Firefox。如果是不支援html5的浏覽器，他隻會用原圖，不會生成灰階圖檔。
注意：如果本地html檔案不能在firefox和chrome上運作的話，你就需要将html檔案部署到伺服器上去了。
自我實踐
我自己按照教程測試了下，發現些需要注意的事項，使用firefox打開頁面，程式不能正确運作，但是将相關代碼部署到伺服器之後可以運作。
必須保證是本地圖檔，不然要報Security error。
這是因為：
Canvas是HTML5标準中的畫布元素,可以用來繪制2D和3D圖像.
但是在調試的時候很容易遇到Security error問題.
目前我在調試時遇到過的Security error主要是出現在toDataURL()和src上.
Security error說明這段代碼沒有語義問題,但因為安全原因無法正常運作.
throw Security error的情況:
在Canvas中使用跨域圖檔
在本地無伺服器環境下進行調試
無法擷取目前域與圖檔的關系
在stackoverflow上查到的一些解決方法通常是讓你解決跨域問題.
但實際上如果你本地調試時不使用伺服器軟體也會造成這個問題.
例如: 本地調試時使用toDataURL功能,此時的Canvas中使用了本地的圖檔檔案.在Chrome和Firefox中仍然會throw security error.
常見的解決方法是在本地架設一個伺服器環境,或者将内容送出到伺服器上再進行調試.
<a href="http://www.vancl.com/?source=kbh1983&sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>