Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
59
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

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

まとめ

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

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
59
Help us understand the problem. What are the problem?