Canvasで画像縮小をやってみた

canvas javascript html

カメラ解像度アップにより、画像サイズがメガ超えしていることからアップロードへの影響があるため、 Canvasを使ってクライアントサイドで画像縮小をやってみた。

Canvasって？
ざっくりいうとjavascriptで画像を書けたり、画像を操作したりできます。
Canvasとは - Canvas - HTML5.JP

今回は、画像縮小を実際にやってみてどれくらいファイルサイズが削減できるのかためしてみた。
なんと、2MBくらいの画像が260KB程度まで落ちた！ 読み込み速度もはやい！！
これならラクラクアップロードできそうやね ♪

サンプルコード
html

<div id="contents" style="margin:20px; border-top:solid 1px #000;">
  <h3>canvasTest</h3>
  <input id="inputFile" name="photo" type="file" accept="image/*" capture><br>
</div>

javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  $('input[name=photo]').change(function(e) {
    var file = e.target.files[0];
    if (file.type.match(/image.*/)) {
      var canvas = document.createElement("canvas"),
          ctx = canvas.getContext('2d'),
          image = new Image(),
          size = 1200;
      canvas.width = canvas.height = 0;
      image.src = URL.createObjectURL(file);
      image.onload = function() {
        var w = size, h = image.height * (size/image.width);
        canvas.width = w;
        canvas.height = h;
        ctx.drawImage(image, 0, 0, w, h);

        var img = document.createElement('img');
        img.src = canvas.toDataURL(file.type);

        var head = 'data:' + file.type + ';base64,';
        var imgFileSize = Math.round((img.src.length - head.length)*3/4);
        $('#contents').append("<div><span>" + "元画像サイズ" + (file.size/1024).toFixed(1) + "kb" + " => " + "変換後サイズ" + (imgFileSize/1024).toFixed(1) + "kb" + "</span></div>")

        $("#contents").append(img);
      }
    }
  });
</script>

デモ

参考