こんにちはマダラです！
久々に技術屋っぽい投稿です。
突然ですが、クライアント、ブラウザ側で画像を圧縮させたい時ってありますよね
タブレットや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するようにしとけばオーケーですね！
ぜひ参考にしてください
ではでは