這篇文章給大家分享的是有關(guān)HTML5如何將圖片設(shè)置成灰度圖的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供杞縣網(wǎng)站建設(shè)、杞縣做網(wǎng)站、杞縣網(wǎng)站設(shè)計(jì)、杞縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、杞縣企業(yè)網(wǎng)站模板建站服務(wù)，十年杞縣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

目的

這個demo將會向你展示用html5和jquery，如何實(shí)現(xiàn)鼠標(biāo)在圖片上移動移出時，灰度圖像和原圖之間的切換。在html5出現(xiàn)之前，要實(shí)現(xiàn)這個功能就需要準(zhǔn)備兩個圖片，一個灰度圖片，一個原圖。但是現(xiàn)在借助于html5可以實(shí)現(xiàn)的更快更容易，因?yàn)榛叶葓D片是直接在原圖上生成的。我希望這段js代碼對你在創(chuàng)建文件或者圖片陳列功能的時候有幫助作用。

jquery 代碼

下面的jquery代碼將會尋找目標(biāo)圖片，并生成一個灰度的版本。當(dāng)你鼠標(biāo)移動到圖片上時，灰度圖片會變成原色。

復(fù)制代碼 代碼如下:

如何使用

依照下面的步驟：

引用jquery.js

復(fù)制上面的代碼

設(shè)置目標(biāo)圖片(eg: .post-img, img, .gallery img, etc.)

你也可以設(shè)置動畫的速度(ie. 1000 = 1 second)

兼容性

我嘗試了所有支持html5和canvas的瀏覽器，例如：Chrome, Safari, 和 Firefox。如果是不支持html5的瀏覽器，他只會用原圖，不會生成灰度圖片。

注意：如果本地html文件不能在firefox和chrome上運(yùn)行的話，你就需要將html文件部署到服務(wù)器上去了。

自我實(shí)踐

我自己按照教程測試了下，發(fā)現(xiàn)些需要注意的事項(xiàng)，使用firefox打開頁面，程序不能正確運(yùn)行，但是將相關(guān)代碼部署到服務(wù)器之后可以運(yùn)行。

必須保證是本地圖片，不然要報(bào)Security error。

這是因?yàn)椋?/p>

Canvas是HTML5標(biāo)準(zhǔn)中的畫布元素,可以用來繪制2D和3D圖像.

但是在調(diào)試的時候很容易遇到Security error問題.

目前我在調(diào)試時遇到過的Security error主要是出現(xiàn)在toDataURL()和src上.

Security error說明這段代碼沒有語義問題,但因?yàn)榘踩驘o法正常運(yùn)行.

throw Security error的情況:

在Canvas中使用跨域圖片

在本地?zé)o服務(wù)器環(huán)境下進(jìn)行調(diào)試

無法獲取當(dāng)前域與圖片的關(guān)系

在stackoverflow上查到的一些解決方法通常是讓你解決跨域問題.

但實(shí)際上如果你本地調(diào)試時不使用服務(wù)器軟件也會造成這個問題.

例如: 本地調(diào)試時使用toDataURL功能,此時的Canvas中使用了本地的圖片文件.在Chrome和Firefox中仍然會throw security error.

常見的解決方法是在本地架設(shè)一個服務(wù)器環(huán)境,或者將內(nèi)容提交到服務(wù)器上再進(jìn)行調(diào)試.

感謝各位的閱讀！關(guān)于“HTML5如何將圖片設(shè)置成灰度圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！