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プログラマ)にて試してみました。

コメント

  1. 慎之助 より:

    「JavaScriptで縮小画像の作成」大変勉強になりました。
    ありがとうございます。

    「画像を縮小して表示」サンプルと
    「canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)」のサンプルを元にして、
    「JavaScriptで縮小画像を作成してサーバーにPOST送信する方法」を試行錯誤しながら作っていますが、なかなか出来ません。
    そのやり方のサンプルを掲載されることを、とてもとても楽しみにいたしております。

    • amyu より:

      コメントありがとうございます。自分が書いたブログが勉強になったと言っていただきうれしく思っています。
      ブログのネタもないので、「JavaScriptで縮小画像を作成してサーバーにPOST送信する方法」は近いうちに試してみようと思います。

タイトルとURLをコピーしました