IE11で画像をグレイスケールにする方法(jQueryプラグイン利用)

以前のバージョンではIEで画像をグレイスケールにする場合スタイルシート(filter)で簡単に変換できていたのですがIE10あたり(?)で利用できなくなりました。

現状でも「svg」という手法を使えばjavascript(jQuery)を利用しなくとも実現可能なのですがコードの量が多くなってしまい視野性が下がってしまいます。

チェックボックスのチェック状態などで動的に変換する場合等を考慮すると、jQueryが利用できるなら今回紹介するプラグインが有効なのではないでしょうか。

グレースケールを実現することのできるプラグインは「Colorimazer」というプラグインになります。

Colorimazerの入手方法

Colorimazerは以下のサイトから入手(ダウンロード)できます。

jQuery.Colorimazer(英語サイト)

Colorimazerの利用方法

Colorimazerの利用はとても簡単で対象の要素(クラス等)に対して「grayscall」メソッドを実行するだけです。
このサンプルへのリンク

この様に簡単にグレースケールにすることが出来ます。

ただし、グレースケールから元の画像に戻すにはひと手間必要で、元の状態を「save」メソッドを利用して元の状態を保存したのちに「restore」メソッドを利用して保存した状態に戻す必要があります。
このサンプルへのリンク
この記事は役に立ちましたか?
  • 役に立った(0)
  • もっと詳しい情報が必要(0)
  • 情報が古かった(0)
  • 目的の情報では無かった(0)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする