Question

我是jQuery的新手，非常喜欢它。我想知道是否有类似IE的效果，我可以在运行时将图像转换为灰度？

Answer 1

查看pixastic ...它应该可用...

Internet Explorer 5.5+
Opera 9.5 +
Firefox 2+
WebKit Nightly

http://www.pixastic.com/lib/docs/actions/desaturate/

var img = new Image();
img.onload = function() {
    Pixastic.process(img, "desaturate", {average : false});
}
document.body.appendChild(img);
img.src = "myimage.jpg";

Answer 2

这是我的简单jQuery插件：jquery-grayscale

你运行它：

$('img').grayscale();

它使用＆lt; canvas＆gt;所以它不适用于旧浏览器。

Answer 3

我不认为jQuery有一种特殊的方法，但你可以使用<canvas>标签。 see tutorial

Answer 4

有一个例子是使用jQuery在反向（颜色到灰度）中完成：

http://www.sohtanaka.com/web-design/examples/hover-over-trick/

我想它可以很简单地反转它，所以它从灰色变为彩色。代码本身看起来非常简单和优雅。

Answer 5

如果您的目标是在悬停时使图像变灰，您也可以使用此技巧。 http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

Answer 6

我编写了一个名为$.greyScale()的jQuery插件，可以为您完成此操作。它也通过代理请求来支持托管在另一个域上的图像。

只需使用

调用它

$('img').grayScale();

Answer 7

有一种方法只能使用 CSS3 来执行此操作（因此一般来说不是jQuery功能）。虽然不需要任何插件。

在CSS中添加：

.grayscale {
     filter: grayscale( 100% );
}

对于 Safari ，您必须使用：

.grayscale {
     -webkit-filter: grayscale( 100% );
}

在JS中使用：

$('#myElement').addClass('grayscale');

希望这会有所帮助！

Answer 8

我尝试了这里列出的所有内容并且它们运行不正常（要么做太多就像挂在悬停上，要么就是不能跨浏览器或域工作）。所以我自己鞭打了一个，这非常简短：https://github.com/arturnt/jquery.grayscale.js

jQuery将图像转换为灰度？

8 个答案: