Help us understand the problem. What is going on with this article?

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

More than 5 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

まとめ

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

geek_duck
Hello world.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした