jQuery Select Areas - 一つの写真から複数の範囲を指定 // MOONGIFT Archived

クロップ（切り抜き）をサポートするライブラリはたくさんあります。顔写真をアップロードして一部だけ切り抜くのはよくありますし、写真の中の余計な部分を消す際にもクロップが使われます。今回はちょっと面白い、複数範囲のクロップをサポートしたjQuery Select Areasを紹介します。

jQuery Select Areasの使い方

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

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

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

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

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