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

私は1、2週間前に同様のことをしたかったのですが、次の例を見つけました。

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

これは、画像をキャンバスにレンダリングし、グレースケーリングしてからBase64表現を取得することで機能します。IE用ではありませんが、Chromeを指定したので、問題ないはずです。

完全を期すために、IEでの画像のグレースケーリングは

filter: gray;

cssオプション

Answer 3

Javascriptが要件であるかどうか、または動的画像でこれを使用する予定があるかどうかはわかりませんが、CSS/HTMLのみを使用してこれを行う方法を説明するチュートリアルをまとめました。opacityとtransitionスタイルの宣言を利用します。:hoverこれにより、2つの画像は、疑似セレクターを使用して、それらの間に「遷移錯視」を作成できます。

それをチェックして、それがまったく役立つかどうか私に知らせてください。http://www.stephenwalcher.com/blog/2012/01/22/javascript-free-image-desaturat/