Canvasでクライアント側(ブラウザ)で画像圧縮(リサイズ)を行う

こんにちはマダラです!

久々に技術屋っぽい投稿です。
突然ですが、クライアント、ブラウザ側で画像を圧縮させたい時ってありますよね

タブレットやiphoneで撮影した画像をフォームでそのまま送信すると、大量画像を暑かった場合にネットワーク負荷がかかってしまいます。

ウェブアプリケーションで画像を送信させる時は、クライアント側で送信前に圧縮してしまえばかなりの負担減です。

今回は簡単に実装したコードを紹介します。

ちなみに、管理人自身、このネットワーク負荷のせいで遅延が発生して大失敗した経験があります泣

スポンサーリンク

Canvasで画像を圧縮する

Canvasとは、HTML5から新しく追加される図形を描くための技術仕様で、 HTMLの<canvas>要素とJavaScriptを組み合わせて図形を描画します。

やり方としては、フォームから画像を取得後にcanvas描画をかませて、描画された画像のデータを得ることで圧縮させます。

クライアント側から圧縮できるため、重たい画像をネットワークに流さず負荷を軽減できるわけですね

JavaScriptのコードは下記のようになります。
前半ちょっと省略されてますが、画像の取得方法についてはググってください、、
すいません

var file = this.files[0]; //画像を取得
var reader = new FileReader();
reader.readAsDataURL(file);

//画像読み込み完了後の処理
reader.onload = function() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  //画像の初期読み込み
  var img = new Image();
  img.onload = function(){
  var width = img.width;
  var height = img.height; //ここのサイズを任意の値にしてもリサイズされる
  canvas.width = width;
  canvas.height = height; //ここでトリミング。width,heightと同サイズならjpeg圧縮のみされる
  context.drawImage(img, 0, 0,width,height);
  var resized_img_url = canvas.toDataURL("image/jpeg", 0.5);
  //画像の出力
  $(imgセレクタ).attr('src', resized_img_url);
}
img.src = reader.result;
}

送信する際はAjaxでresized_img_urlをPOSTするようにしとけばオーケーですね!

ぜひ参考にしてください

ではでは

スポンサーリンク