JavaScript
HTML5
canvas

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

More than 3 years have passed since last update.

目的

ユーザに画像をアップロードしてもらうような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では右クリックして「新しいタブで画像を開く」を実行すると実際の解像度が縮小された画像表示されます。
スクリーンショット 2015-07-18 3.46.57.png

まとめ

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