[JavaScript]画像の圧縮を行う

input type のfileから取得した画像データを圧縮するにはどうすればいいのだろうか？

$('input[type="file"]').on('change',function (e){
  var $currentTarget = $(e.currentTarget);
  var path = $currentTarget.val();
  path = path.toLowerCase();

  var file = e.currentTarget.files[0];
  var size = file.size;
  var type = file.type;
  var filename = file.name;
    
  var dataUrl = URL.createObjectURL(file);

  var image = new Image();
  image.onload = function(){
    var width = image.width;
    var height = image.height;
    var ratio = 0.5;

    var canvasWidth = Math.floor(width * ratio);
    var canvasHeight = Math.floor(height * ratio);
    var $canvas = $('<canvas></canvas>');
    var canvas = $canvas[0];
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    
    var ctx = canvas.getContext('2d');
    ctx.drawImage( image , 0, 0, width, height, 0, 0, canvasWidth, canvasHeight);
    var base64 = canvas.toDataURL(type);
  };
  image.src = dataUrl;
});

元の大きさの画像を半分にする処理なのですが、0.5のところを調整すれば、拡大したりすることも可能。

この処理では、実際に、html内に、inputだけあればよく、canvasタグとimgタグを用意しなくても処理を実行できちゃうところが便利ですね。

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