範囲を指定して切り抜き。jQuery製の画像クロップライブラリ「Jcrop」
Jcropは画像を四角くクロップするjQueryプラグインです。
写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。
はい、まずは普通の表示です。マウスで範囲指定します。
こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。
正方形に限らず形を決められます。
コールバックにも対応していて、マウスを動かしたタイミングなどが座標付きで取り出せます。
サムネイルビューにも対応しています。範囲指定した部分が小さくなって右側に表示されています。
範囲を大きくしたらサムネイルが自動調整されています。
CSSを使って決められた範囲だけクロップ表示することもできます。
サーバサイドに飛ばしたところです。PHP+GDのスクリプトサンプルも用意されています。
Jcropはサーバサイドに座標を飛ばせるので、後は任意のライブラリで画像を切り抜いて保存ができます。切り抜きの他、人物のタグ付けなどにも使えそうなライブラリです。対応ブラウザはFirefox2以上、Safari3以上、Opera9.5以上、Google Chrome0.2以上そしてIE6以上となっています。
JcropはJavaScript/jQuery製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
オンラインに溢れているコンテンツの中で最も作成コストとインパクトのバランスが良いのは画像ではないでしょうか。動画に比べると製造コストは低く、それでいてテキストに比べると大きなインパクトが得られます。だからこそ画像を生成したり、検索したりするサービスは常に人気が高くなっています。
そんな画像も与えられたまま使っているとあまり面白くはありません。ちょっとした加工を行うことでさらに魅力的になる、それが画像の面白いところです。角丸にしたり、縁取りをしたり、セピアにしたりするのも面白いでしょう。それをJavaScriptだけで実現したりすればさらにインパクトが強いはずです。