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

クロップ(切り抜き)をサポートするライブラリはたくさんあります。顔写真をアップロードして一部だけ切り抜くのはよくありますし、写真の中の余計な部分を消す際にもクロップが使われます。

今回はちょっと面白い、複数範囲のクロップをサポートしたjQuery Select Areasを紹介します。

jQuery Select Areasの使い方

デモです。2つの範囲が表示されています。それ以外の部分はぼかしてあるのが面白いです。

さらに追加できます。重なった範囲は共通して使われます。範囲はピクセル情報で取得できます。

範囲は幾つでも追加できます。追加した場所は左上の場所と幅、高さで取得できます。

jQuery Select Areasは表示も特殊なので、使い方を考える必要がありそうです。クロップするのではなく、そのまま使っても良いかもしれません。利用目的を選びますが、ぴったり当てはまる場面もあるでしょう。

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

360Learning/jquery-select-areas: jQuery pluggin for selecting an extensible area in a picture

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2