クライアント側でcanvasを使って画像をリサイズする

目的

ユーザに画像をアップロードしてもらうようなWebアプリで、画像の解像度が大きい場合はサーバ側でアップロードされた画像の解像度をリサイズして格納するような処理を実装することがあると思います。
サーバ側ではなく、クライアント側で画像をリサイズする方法を調べました。

機能

次のcanvasのメソッドを利用することでクライアント側で画像のリサイズができます。
ctx.drawImage(srcImage, srcX, srcY, srcWidth, srsHeight, dstX, dstY, dstWidth, dstHeight)
第1引数に元画像(Imageオブジェクトや別のcanvasオブジェクトなどを指定可能)
第2, 3, 4, 5引数に元画像から切り取る領域を指定
第6, 7, 8, 9引数にリサイズ後の領域を指定

var scale = 0.5; // 縦横を50%縮小
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
var reader = new FileReader();
image.crossOrigin = "Anonymous";
image.onload = function(event){
    var dstWidth = this.width * scale;
    var dstHeight = this.height * scale
    canvas.width = dstWidth;
    canvas.height = dstHeight;
    ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, dstWidth, dstHeight);
    $("#dst").attr('src', canvas.toDataURL());
}
image.src = "https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300"; // 元画像

デモ

http://jsfiddle.net/geekduck/nts6rojh/1/
Chromeでは右クリックして「新しいタブで画像を開く」を実行すると実際の解像度が縮小された画像表示されます。

まとめ

クライアント側で画像をリサイズする方法を調べました。
この方法を利用すれば、ユーザが指定したファイルをクライアント側でリサイズし、その後サーバにアップロードするといった処理が可能になります。