javascript - 在 Chrome 中使用 Javascript/jQuery/CSS 去色图像

Question

我似乎找不到使用 CSS 或 Javascript从Chrome中的彩色图像渲染灰度图像的方法。我有一种感觉，任何 Canvas 解决方案都无法在 Chrome 中运行，并且正在寻找另一个解决方案。

感谢您提供任何帮助，我已经尝试过 Pixastic 和其他一些 jQuery 解决方案，但都无济于事。

Answer 1

这可能会有所帮助：

    filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

Answer 2

一两周前我想做类似的事情，发现了这个例子：

http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

它通过将图像渲染到画布、对其进行灰度化然后获取 Base64 表示来工作。它不适用于 IE，但既然您指定了 Chrome，那么您应该很高兴。

只是为了完整起见，在 IE 中对图像进行灰度化可以使用

filter: gray;

CSS 选项

Answer 3

I don't know if Javascript is a requirement for you, or if you plan to use this on dynamic images, but I put together a tutorial that explains how to do this using only CSS/HTML. It makes use of the opacity and transition style declarations. With this, two images can create a "transition illusion" between themselves using the :hover pseudo-selector.

Check it out and let me know if it helps at all. http://www.stephenwalcher.com/blog/2012/01/22/javascript-free-image-desaturat/