ITエンジニア/デザイナ向けにオープンソースを毎日紹介

JPEGなど圧縮率によって画像の粗さやサイズが変わるフォーマットの場合、実際にその保存方法によってどう変わっているか比較してみないと分かりづらいでしょう。その時、ウィンドウを切り替えながら比較しても画面がチカチカしてしまってははっきりと分かりません。

そこで使ってみたいのがjQuery Images Compareです。スライダーを使ってスムーズに比較できます。

jQuery Images Compareの使い方

こちらがデモです。右と左で画像を重ねて比較できます。

スライダーを動かすと表示範囲が変わります。

動かしているところです。

jQuery Images Compareを使うとほぼ同じ構図の画像を二つ重ねて比べられます。対応しているブラウザはIE9以上になるので、幅広いブラウザで利用できます。また、マウスだけでなくタッチ操作にも対応しています。変化した時のイベントを補足することもできるので、カスタマイズにもつなげられます。

jQuery Images CompareはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

sylvaincombes/jquery-images-compare: A jquery plugin for comparing two images

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2