Webサイトでユーザにプロフィールアイコンをアップロードしてもらうというのはよくある機能だと思います。そんな時にユーザがちょうど良くアイコンサイズ（大抵正方形）の画像を持っているとは限りません。 そこで使ってみたいのがiCropperです。JavaScriptを使ってWeb上で画像のクロップを行うライブラリです。

iCropperの使い方

こちらが基本形。まずは正方形の形を維持したバージョン。

こちらは自由な四角を描けますが、Shiftキーを押すと正方形になります。

こちらは2:1を維持するバージョンです。

右側に切り抜いた後の画像が表示されています。枠はマウスで自由に移動したり、大きさの変更が出来るようになっています。後はサムネイルになっている画像をデータとしてサーバに送れば良いだけです。

コードは次のようになります。

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のオープンソース・ソフトウェアです。

iCropper - Javascript Image Cropper supnate/icropper