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使图像灰度

回答

相关问题