FileReaderを使って選択した画像の真ん中あたりを正方形に切り取って表示する

フォームで画像をアップロードする際にプレビュー表示したい、というとき、FileReaderが使えるブラウザだとそれを使って簡単に実現出来る。
html5の File API を使って、アップロード無しで画像プレビュー - 超自己満足プログラミング
「プレビュー表示する領域は正方形でサイズが決まっていて、縦長もしくは横長の画像がアップロードされたときは縦横比を変えずに真ん中あたりを正方形に切り取った形で表示したい」
というとき。

こんなイメージ。
無理矢理やってみた。

crop image from FileReader - jsdo.it - share JavaScript, HTML5 and CSS

実際に選択された画像ファイルのサイズが分からないので、一度見えない領域にimgタグで描画してしまい、その高さ／幅を取得し、すぐ消す。
その高さ、幅を元にプレビュー表示すべきサイズと縦横のオフセットを計算して、対象領域にセットする。
CSSを使ってサムネイル化する部分は下記記事を参考にさせていただきました。
CSSで画像のサムネイル化｜エヌケー・テック株式会社【福島県郡山市】

var fr = new FileReader();
fr.onload = function() {
    var img = $('<img>').attr({
        src: fr.result
    }).load(function () {
        // get height & width
        var image = $(this);
        var height = image.height();
        var width  = image.width();
        image.parent().remove();
        // calculate size
        var css = { position: 'absolute' };
        if (height > width) {
            height *= 120 / width;
            width = 120;
            css.top  = - (height - 120) / 2;
            css.left = 0;
        } else {
            width *= 120 / height;
            height = 120;
            css.top  = 0;
            css.left = - (width - 120) / 2;
        }
        // add image
        $('#world').html(
            $('<img>').attr({
                src: fr.result,
                height: height,
                width: width
            }).css(css)
        );
    });
    $('body').append(
        $('<div>').css({
            height: '0px',
            width: '0px',
            overflow: 'hidden'
        }).append(img)
    );
};

canvasとか使えばもっと簡単にできるのかな（まだ触ったことなくて分かっていない）