iCropper – JavaScriptを使って画像を四角く切り抜き
Webサイトでユーザにプロフィールアイコンをアップロードしてもらうというのはよくある機能だと思います。そんな時にユーザがちょうど良くアイコンサイズ(大抵正方形)の画像を持っているとは限りません。 そこで使ってみたいのがiCropperです。JavaScriptを使ってWeb上で画像のクロップを行うライブラリです。
iCropperの使い方
右側に切り抜いた後の画像が表示されています。枠はマウスで自由に移動したり、大きさの変更が出来るようになっています。後はサムネイルになっている画像をデータとしてサーバに送れば良いだけです。
コードは次のようになります。
var ic = new ICropper(
'cropperContainer' //Container id
,{
ratio: 1 //Set aspect ratio of the cropping area
,image: 'demo.png'
,preview: [
'previewSmall' //Preview node id
]
}
);
//use bindPreview to dynamically add preview nodes
ic.bindPreview('previewBig');
対応ブラウザはIE7以上と幅広いブラウザで利用できます。
iCropperはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。