jQuery 将图像转换为灰度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2474333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery convert image to grayscale?
提问by Scott B
I'm new to jQuery and really liking it. I'd like to know if there's an effect similar to IE's in which I can convert images to grayscale in the runtime?
我是 jQuery 的新手并且非常喜欢它。我想知道是否有类似于 IE 的效果，可以在运行时将图像转换为灰度？
采纳答案by Gordon Gustafson
I don't think jQuery has a special way to do it, but you can use the <canvas>tag. see tutorial
我不认为 jQuery 有一种特殊的方式来做到这一点，但你可以使用<canvas>标签。看教程
回答by Justin Jenkins
Check out pixastic ... it is supposed to work in ...
查看 pixastic ......它应该在......
- Internet Explorer 5.5+
- Opera 9.5+
- Firefox 2+
- WebKit Nightly
- Internet Explorer 5.5+
- 歌剧 9.5+
- 火狐 2+
- 每晚 WebKit
http://dph.am/pixastic-docs/docs/actions/desaturate/
http://dph.am/pixastic-docs/docs/actions/desaturate/
var img = new Image();
img.onload = function() {
Pixastic.process(img, "desaturate", {average : false});
}
document.body.appendChild(img);
img.src = "myimage.jpg";
回答by Josef Richter
Here's my simple jQuery plugin: jquery-grayscale
这是我的简单 jQuery 插件：jquery-grayscale
You run it like:
你像这样运行它：
$('img').grayscale();
It makes use of <canvas> so it won't work in older browsers.
它使用 <canvas> 所以它不能在旧浏览器中工作。
回答by Dan Diplo
There's an example of this being done in reverse (colour to greyscale) with jQuery at:
有一个使用 jQuery 反向（颜色到灰度）完成的示例：
http://www.sohtanaka.com/web-design/examples/hover-over-trick/
http://www.sohtanaka.com/web-design/examples/hover-over-trick/
I imagine it would be simple enough to reverse this so it went from grey to colour. The code itself looks very simple and elegant.
我想扭转这个很简单，所以它从灰色变成了彩色。代码本身看起来非常简单和优雅。
回答by Sumeet Chawla
You can also use this trick if your aim is to just make the image gray scale on hover. http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
如果您的目标是在悬停时使图像灰度，您也可以使用此技巧。 http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
回答by Prydie
I have written a jQuery plugin called $.greyScale()which does this for you. It supports images hosted on another domain by proxying requests as well.
我编写了一个名为$.greyScale()的 jQuery 插件，它为您完成了这项工作。它也通过代理请求支持托管在另一个域上的图像。
It is just invoked by using
它只是通过使用调用
$('img').grayScale();
回答by hypers
There's a way you can do this with CSS3only (so not a jQuery feature in general). It doesn't require any plugins though.
有一种方法可以仅使用CSS3执行此操作（因此通常不是 jQuery 功能）。不过它不需要任何插件。
In CSS add:
在 CSS 中添加：
.grayscale {
filter: grayscale( 100% );
}
For Safariyou'll have to use:
对于Safari，您必须使用：
.grayscale {
-webkit-filter: grayscale( 100% );
}
In JS use:
在JS中使用：
$('#myElement').addClass('grayscale');
Hope this helps!
希望这可以帮助！
回答by Art
I tried all the ones listed here and they didn't work well (either doing too much like attaching on hover or just not working across browsers or domains). So I whipped one up myself, which is very short and concise: https://github.com/arturnt/jquery.grayscale.js
我尝试了此处列出的所有方法，但效果不佳（要么做得太多，例如悬停时附加，要么只是无法跨浏览器或域工作）。所以我自己做了一个，非常简短：https: //github.com/artturnt/jquery.grayscale.js
