Web上で画像の範囲を指定できる「imgAreaSelect」 // MOONGIFT Archived

imgAreaSelectは画像の切り抜きに役立つ範囲選択機能を提供するjQueryライブラリです。

ユーザにアップロードされた画像の一部を切り出してアイコンに使うと言ったような操作はよくあります。そんなUIをjQueryを使って実現するのがimgAreaSelectです。

一例です。

選択されていない場所はグレーになるので分かりやすいです。

各ポイントの数値が取れます。

imgAreaSelectではユーザが縦、横の長さを自由に変更できる他、比率固定でサイズを変更したり、あらかじめ決められた場所に選択範囲を置くと言った指定ができます。切り抜く箇所や大きさの値が受け取れるので、後はサーバサイドで切り抜き処理を行えば良いでしょう。

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

MOONGIFTはこう見る

imgAreaSelectの主な使いどころとしてはユーザが自分の写真をアップロードして特定の場所を切り抜いてプロフィールにするといったものになるかと思います。画像編集ソフトウェアでもできない作業ではありませんが、大抵のユーザがそのようなスキルは持ち合わせていないと考えるべきです。

デスクトップはもちろん、スマートフォンが普及すればするほど、熟練者と未熟練者の境は大きくなります。これくらいはできるはず、といった考えはまず捨てる必要があります。また熟練者であっても面倒は避けたいのでWeb上でできるならそれが一番早いと思うはずです。