JavaScriptで縮小画像の作成

スマートフォンなどで撮影した写真をサーバーに転送したい場合、撮影された写真そのままではサイズが大きすぎてアップロードに時間がかかり、縮小してから送りたいといったことをしたいと思っていたら、またまたHTML5 テクニックバイブルに書いてありました。HTML5 テクニックバイブルすごい。

というわけで、上記の書籍を参考に下記のようなコードを書いてみた。

HTML

<canvas style="display:none"></canvas>
<label><input type="radio" name="reduceFlag" value="0" checked>縮小する割合：</label><input type="number" value="50" style="width:50px" id="imageSize0">%<br>
<label><input type="radio" name="reduceFlag" value="1">縮小後の横幅：</label><input type="number" value="500" style="width:50px" id="imageSize1">px<br>
<input type="file" accept="image/*" capture id="inputFile"><br>

JavaScript

var captureForm = document.querySelector('#inputFile'),
  canvas = document.querySelector('canvas'),
  ctx = canvas.getContext('2d');
canvas.width = canvas.height = 0;

captureForm.addEventListener('change', function() {
var file = this.files[0],
    image = new Image(),
    reader = new FileReader(),
    reduceFlag = document.querySelector('input[name="reduceFlag"]:checked') ? +document.querySelector('input[name="reduceFlag"]:checked').value : 0; // 縮小方法の確認。念のため、どちらもチェックが入ってない場合のことも考えている
    size = +document.querySelector('#imageSize' + reduceFlag).value;
if (file.type.match(/image.*/)) {
  reader.onloadend = function() {
    image.onload = function() { // 画像が読み込めた時の処理
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      if(reduceFlag == 1){
          var w = size, h = image.height * (size/image.width);
      }else{
          var w = image.width * (size/100), h = image.height * (size/100);
      }
      console.log("元々のサイズ:" + image.width + "×" + image.height);
      console.log("縮小後のサイズ:" + w + "×" + h);

      canvas.width = w;
      canvas.height = h;
      ctx.drawImage(image, 0, 0, w, h);
        
      // 縮小画像を表示
      var img = document.createElement('img');
      img.src = canvas.toDataURL();
      document.querySelector('body').appendChild(img);
    }
    image.src = reader.result;
  }
  reader.readAsDataURL(file);
}
}, false);

以下、実行サンプル。
画像を縮小して表示

やっていることは単純で、画像ファイルを選択すると、縮小用の画像サイズと同じcanvasを作成し、canvasオブジェクトのdrawImageメソッドで、画像を埋め込み、toDataURLメソッドでData URIを取得するというもの。こんな簡単にできるとは・・・。

今回は取得したData URIをimgタグで表示するようにしたサンプルを作成しましたが、これをそのままサーバーに送信したり、先日canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)で紹介したやり方でData URIをバイナリ形式にしてから送信するとサーバーに縮小画像を送信することができそうです。

2014年10月21日追記：
JavaScriptで縮小画像を作成してサーバーにPOST送信する方法 | while(isプログラマ)にて試してみました。