jQuery使图像灰度

Question

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

页面我想在http://jamestestblog.tumblr.com/

上执行此操作

Answer 1

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

  

Hoverizr利用<canvas>元素的图像处理功能   能力。这意味着Hoverizr获取每个信息   将图像的像素分开并依次对其进行处理。

     

然后，取决于您是否想要操纵图像   在原始的上方或下方，顶部元素上的鼠标淡出   揭示下面的元素。

代码如下：

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

Answer 2

出于安全原因，javascript和canvas元素将无法修改从其他域获取的图像。

详见：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

Answer 3

如果你想用javascript做类似的事情，你必须使用画布。 jQuery本身无法做到这一点。然而，还有其他选择。最简单的是使用精灵或两个不同的图像重叠和动画|隐藏|节目。
如果有很多图像，那么另一种选择是在后端使用php中的gd库。然后，您可以使用简单的php文件中的ajax动态加载它们。