javascript - onload からサムネイル画像を作成する

Question

私はここで新しいので、ご容赦ください！SO で見つけた別のスクリプトを使用しました。ユーザーが参照ボタンを選択して画像を選択した後、小さな 50 ピクセルのサムネイル画像がブラウザに表示されます。

フォームの HTML は次のようになります。

<input type='file' onchange="readURL(this);" />
<img id="blah" src="http://openglobaldirectory.com/images/default_profile.gif" width="50" alt="your image" />

そして、次のような JavaScript 関数があります。

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah')
                .attr('src', e.target.result)
                .width(50)
                .height(50);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

ユーザーがファイルから画像を選択すると、50x50 ピクセルのサムネイルがページに表示されますが、画像全体が圧縮され、選択した画像が正方形 (またはほぼ正方形) でない限り、生成されたサムネイルは非常に歪んで見えます。

私がやりたいのは、元のサイズに関係なく、歪んだ画像や圧縮された画像を表示しない、よりきれいなサムネイルを作成することです。最初に画像の高さを 50px に下げてから、中央の 50px 相当の画像に基づいてサムネイルを取得する必要があると思います。

これを行う方法を知っている人はいますか？

ところで、私が例として従っている元のスクリプトはここにあります: HTML - ファイル名を選択した後に画像を表示する