JQuery 改变 <img> 的色调、饱和度、伽玛？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4143227/
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 change hue, saturation, gamma of <img>?
提问by Tomkay
I want to make an image darker if you hover your mouse over it. Is it possible to change the hue, saturation or gamma of an img with JQuery (or Javascript)?
如果您将鼠标悬停在图像上，我想让图像变暗。是否可以使用 JQuery（或 Javascript）更改 img 的色调、饱和度或伽玛？
回答by niksy
Have you tried PaintbrushJSor Pixasticlibrary?
您是否尝试过PaintbrushJS或Pixastic库？
回答by Marcelo Cantos
Show and hide a semi-transparent black <div>over the top of the image.
<div>在图像顶部显示和隐藏半透明黑色。
回答by Nick Craver
It is not possible to do this using onlyJavaScript (since it can't manipulate binary files), however you can do this with the HTML5 <canvas>element to help.
仅使用JavaScript无法做到这一点（因为它无法操作二进制文件），但是您可以使用 HTML5<canvas>元素来帮助做到这一点。
Take a look here, there are some libraries out there to help.
看看这里，有一些图书馆可以提供帮助。
If you just want to fade it, change the opacity on hover, for example:
如果您只想淡化它，请更改悬停时的不透明度，例如：
$("img").css({ opacity: 0.5 }).hover(function() {
$(this).animate({ opacity: 1 });
}, function() {
$(this).animate({ opacity: 0.5 });
});
回答by Pete Fecteau
I put together this prototype that uses a cross-browser, CSS only solution to animating image saturation on hover. There's planty of ways to do it in JS/jQuery but hey why not just do it in CSS?
我将这个原型放在一起，它使用跨浏览器、仅使用 CSS 的解决方案来为悬停时的图像饱和度设置动画。在 JS/jQuery 中有很多方法可以做到这一点，但是为什么不直接在 CSS 中做到呢？
img[class*="filter-resat"] {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // For Firefox 10+
filter: gray; // For IE 6+
-webkit-filter: grayscale(100%); // for Chrome & Safari
// Now we set the opacity
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // for IE
filter: alpha(opacity=40); // Chrome + Safari
-moz-opacity: 0.6; // Firefox
-khtml-opacity: 0.6; // Safari pre-webkit
opacity: 0.6; // Modern
// Now we set up the transition
-webkit-transition: all 1.0s ease;
-webkit-backface-visibility: hidden;
}
img[class*="filter-resat"]:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
// You can leave this part out and the above code will default to a 1 second transition duration.
img.filter-resat9 {-webkit-transition: all .9s ease;}
img.filter-resat8 {-webkit-transition: all .8s ease;}
img.filter-resat7 {-webkit-transition: all .7s ease;}
img.filter-resat6 {-webkit-transition: all .6s ease;}
img.filter-resat5 {-webkit-transition: all .5s ease;}
img.filter-resat4 {-webkit-transition: all .4s ease;}
img.filter-resat3 {-webkit-transition: all .3s ease;}
img.filter-resat2 {-webkit-transition: all .2s ease;}
img.filter-resat1 {-webkit-transition: all .1s ease;}
Check out the DEMOhere and the JSfiddlehere
回答by the_lotus
You can do this in CSS
你可以在 CSS 中做到这一点
IMG:hover
{
-ilter: brightness(0.7);
-webkit-filter: brightness(0.7);
-moz-filter: brightness(0.7);
-o-filter: brightness(0.7);
-ms-filter: brightness(0.7);
}
There's a bunch of other filters like blur, saturate, contrast, ...
还有一堆其他过滤器，如模糊，饱和，对比度，......
You can easely use JQuery to change the css if you want.
如果需要，您可以轻松使用 JQuery 更改 css。
回答by Abhranil Das
Extending Marcelo's suggestion, you could have a copy of your image in the final, darker stage, put it on top of the original, and vary its opacity on mouse hover like Nick said. This method allows you to do anything with the image transition: change its hue, saturation etc. A simple Javascript fade animation code can be found here.
扩展 Marcelo 的建议，您可以在最后的较暗阶段复制您的图像，将其放在原始图像的顶部，并像尼克所说的那样在鼠标悬停时改变其不透明度。此方法允许您对图像过渡执行任何操作：更改其色调、饱和度等。可以在此处找到一个简单的 Javascript 淡入淡出动画代码。
