HTML5實作-圖片設定成灰階圖_html5教學技巧

以前，在web上要顯示灰階圖片的話，只有手工使用圖片軟體轉換。但現在藉助於html5的canvas可以實現這個過程，而不需要再藉助圖片編輯軟體了。我用html5和jquery做了一個demo，來展示如何實現這個功能。

目的
這個demo將會向你展示用html5和jquery，如何實現滑鼠在圖片上移動移出時，灰階影像和原圖之間的切換。在html5出現之前，要實現這個功能就需要準備兩個圖片，一個灰階圖片，一個原圖。但現在藉助html5可以實現的更快更容易，因為灰階圖片是直接在原圖上產生的。我希望這段js程式碼對你在創建檔案或圖片陳列功能的時候有幫助作用。

效果圖
 
jquery 代碼
下面的jquery代碼將會尋找目標圖片，並產生一個灰階的版本。當你滑鼠移動到圖片上時，灰階圖片會變成原色。

複製程式碼

程式碼如下:

如何使用
依照下面的步驟：
引用jquery.js
複製上面的程式碼
設定目標圖片(eg: .post-img, img, . gallery img, etc.)
你也可以設定動畫的速度(ie. 1000 = 1 second)
 
相容性
我嘗試了所有支援html55和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. 常見的解決方法是在本地架設一個伺服器環境,或者將內容提交到伺服器上再進行調試.