2012/01/23
範囲を指定して切り抜き。jQuery製の画像クロップライブラリ「Jcrop」
-
admin
- ソフトウェア ,Web ,オープンソース
- JavaScript ,MIT License ,jQuery ,プレミアム ,画像
写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。 0
はい、まずは普通の表示です。マウスで範囲指定します。
0
こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。
0
正方形に限らず形を決められます。
0
コールバックにも対応していて、マウスを動かしたタイミングなどが座標付きで取り出せます。
0
サムネイルビューにも対応しています。範囲指定した部分が小さくなって右側に表示されています。
0
範囲を大きくしたらサムネイルが自動調整されています。
0
CSSを使って決められた範囲だけクロップ表示することもできます。
0
サーバサイドに飛ばしたところです。PHP+GDのスクリプトサンプルも用意されています。
0
Jcropはサーバサイドに座標を飛ばせるので、後は任意のライブラリで画像を切り抜いて保存ができます。切り抜きの他、人物のタグ付けなどにも使えそうなライブラリです。対応ブラウザはFirefox2以上、Safari3以上、Opera9.5以上、Google Chrome0.2以上そしてIE6以上となっています。 0
JcropはJavaScript/jQuery製、MIT Licenseのオープンソース・ソフトウェアです。 0
プレミアムユーザには“MOONGIFTはこう見る”、記事の一行概要、追加スクリーンショット、デモや追加URLが表示されます。登録（500円/月）はこちらから！ プレミアムユーザのログインはこちらから 0
MOONGIFTの関連記事
このエントリーを含むTwitter
アンケート