javascript - jQuery 使图像灰度化

Question

就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放， visit the help center以获得指导。

已关闭 11 年前。

詹姆斯在这里。我已经看过 50 多个教程，但我似乎找不到一个简单、紧凑的 jQuery 灰度教程。我尝试过的每个脚本都无法在我尝试启用此功能的网站上运行。如果有人能在我的旅程中帮助我编写一个脚本，使图像没有高度，但在页面加载时宽度为 500px 灰度，但在悬停时更改为颜色，那就太棒了。我相信这个脚本会使用 HTML5 Canvas。

我想在以下页面执行此操作:http://jamestestblog.tumblr.com/

Answer 1

有一个名为 Hoverizr 的库。你应该看看。

Hoverizr takes advantage of the <canvas> element's image proccessing capabilities. What this means is that Hoverizr gets info on each separate pixel of the image and proccesses it acoordingly.

Then, depending on whether you wanted the manipulated image to be above or below the original, on mouse over the top element fades out to reveal the element below.

代码如下:

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