現状でも「svg」という手法を使えばjavascript（jQuery）を利用しなくとも実現可能なのですがコードの量が多くなってしまい視野性が下がってしまいます。
チェックボックスのチェック状態などで動的に変換する場合等を考慮すると、jQueryが利用できるなら今回紹介するプラグインが有効なのではないでしょうか。
グレースケールを実現することのできるプラグインは「Colorimazer」というプラグインになります。
Colorimazerの入手方法
Colorimazerは以下のサイトから入手（ダウンロード）できます。jQuery.Colorimazer（英語サイト）
Colorimazerの利用方法
Colorimazerの利用はとても簡単で対象の要素（クラス等）に対して「grayscall」メソッドを実行するだけです。|
1 2 3 4 5 6 7 8 9 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="./jquery.colorimazer.min.js"></script><!-- 入手したプラグインへのパス --> <script> $(function(){ $(".gray").grayscale(); }); </script> <img src="https://pg.kdtk.net/wp-content/uploads/sample_rgb.png" class="gray"> <img src="https://pg.kdtk.net/wp-content/uploads/sample_rgb_c.png" class="gray"> |
この様に簡単にグレースケールにすることが出来ます。
ただし、グレースケールから元の画像に戻すにはひと手間必要で、元の状態を「save」メソッドを利用して元の状態を保存したのちに「restore」メソッドを利用して保存した状態に戻す必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="./jquery.colorimazer.min.js"></script><!-- 入手したプラグインへのパス --> <script> $(function(){ $(".gray").save(); //元の画像の状態を保存する }); </script> <img src="https://pg.kdtk.net/wp-content/uploads/sample_rgb.png" class="gray"> <img src="https://pg.kdtk.net/wp-content/uploads/sample_rgb_c.png" class="gray"> <br /> <br /> <input type="button" onclick="$('.gray').grayscale();" value="グレイスケール"> <input type="button" onclick="$('.gray').restore();" value="元に戻す"> |