jQuery使圖像灰度

詹姆斯在這裏。我看過50多篇教程，但我似乎無法找到一個簡單的小型jQuery灰度教程。我試過的每一個腳本都不會在我試圖啓用它的站點上運行。如果任何人都可以幫助我在旅途中製作腳本，使圖像無高度，但在頁面加載時寬度爲500px灰度，但在懸停時更改爲顏色，這將非常棒。我相信這個腳本會使用HTML5 Canvas。jQuery使圖像灰度

頁，我想這樣做的：http://jamestestblog.tumblr.com/

來源

2012-02-29 James Charless Dickinson

你檢查：http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css？ – Alexander 2012-02-29 23:29:23

代碼[here]（http://stackoverflow.com/questions/7502271/understanding-how-canvas-converts-an-image-to-black-and-white）工作正常：http://jsfiddle.net/ bhkEt /。 – pimvdb 2012-02-29 23:30:34

@Alexander我不明白這些...... – 2012-02-29 23:34:36

如果你想要做這樣的事情與你必須使用一個畫布的JavaScript。 jQuery本身不能做到這一點。然而，還有其他選擇。最簡單的是使用一個精靈或兩個不同的圖像疊加和生成|隱藏|顯示。
如果有很多圖像，那麼另一個選擇是在後端使用類似於PHP中的gd庫。然後你可以通過一個簡單的php文件來動態加載它們。

來源

2012-02-29 23:35:24 elclanrs

我無法使用兩個圖像。 – 2012-02-29 23:35:52

精靈怎麼樣？ – elclanrs 2012-02-29 23:37:09

我也不能使用它。我想在網絡博客上實現這一目標，但實際上我沒有發佈我發佈的圖片，只是簡單地重新登錄。我沒有時間製作每張圖片的灰度版本，並且每張圖片都沒有使用標籤進行編碼，它們被編碼爲{block：Photo} {/ block：Photo} – 2012-02-29 23:39:12

出於安全原因，javascript和canvas元素將無法修改從其他域獲取的圖像。

查看詳情在：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

來源

2012-02-29 23:48:44 rjz

那是不準確的。雖然無法獲取使用此圖像作爲源的畫布的內容（因爲在此情況下整個畫布會變爲鎖定狀態），但您仍然可以操作畫布。只有參考文章中列出的方法不可用，但它們不需要執行灰度轉換。 – Ext3h 2013-11-01 19:44:08

有一個庫這個叫Hoverizr你應該看看。

Hoverizr利用<canvas>元素的圖像處理的能力。這意味着Hoverizr獲取圖像的每個單獨像素的信息並按順序處理它。

然後，取決於您是否希望操縱的圖像在原始圖像的上方或下方爲，在頂部元素上的鼠標淡出以顯示下面的元素。

代碼如下所示：

$('#imageid').hoverizr({effect:"grayscale"});

來源

2012-02-29 23:49:39 artlung

這沒有用！ :( – 2012-03-01 00:44:38

所以這是爲http：//jamestestblog.tumblr。com /和像這樣的圖像：http://29.media.tumblr.com/tumblr_lvxhd8XX511qiv23bo1_500.jpg對不對？您在瀏覽器的調試工具（Chrome，Firefox或IE）中遇到了哪些錯誤 - 可能是JavaScript錯誤？如果你分享了你得到的錯誤，這將是有幫助的。 – artlung 2012-03-01 00:53:20

你可以看看這裏的解決方案：http://stackoverflow.com/questions/286275/gray-out-image-with-css – artlung 2012-03-01 00:56:16

jQuery使圖像灰度

回答

相關問題