画像をブラウザ側でリサイズしてからアップロードする方法

画像ファイルをリサイズする

最近のスマートフォンで撮影した写真は解像度が高いため、そのままのサイズでサーバーへ送信してしまうと通信時間がかかってしまいます。その為、クライアント側でリサイズしてからサーバーへ送信する作業は必須といえます。

HEIC形式の画像を変換する

また、iPhone11以降で撮影した写真はHEICというブラウザで表示できない形式の画像ファイルで保存されます。その為、HEIC形式の画像ファイルの場合はheic2any というライブラリを利用してJPEGなどブラウザで表示可能な形式に変換してからサーバーへ送信する必要があります。

デモ

画像ファイルを選択すると元の画像とリサイズ後の画像が一覧に表示されます。元の画像に比べて、リサイズ後の方がサイズが小さくなっている事が判ると思います。

こちらにデモページを用意しているのでご利用ください。

var image = new Image();
var fr=new FileReader();
fr.onload=function(evt) {
	// リサイズする
	image.onload = function() {
		var width, height;
		if(image.width > image.height){
			// 横長の画像は横のサイズを指定値にあわせる
			var ratio = image.height/image.width;
			width = thumbnail_width;
			height = thumbnail_width * ratio;
		} else {
			// 縦長の画像は縦のサイズを指定値にあわせる
			var ratio = image.width/image.height;
			width = thumbnail_height * ratio;
			height = thumbnail_height;
		}
		// サムネ描画用canvasのサイズを上で算出した値に変更
		var canvas = $('<canvas id="canvas" width="0" height="0" ></canvas>')
			.attr('width', width)
			.attr('height', height);
		var ctx = canvas[0].getContext('2d');
		// canvasに既に描画されている画像をクリア
		ctx.clearRect(0,0,width,height);
		// canvasにサムネイルを描画
		ctx.drawImage(image,0,0,image.width,image.height,0,0,width,height);

		// canvasからbase64画像データを取得
		var base64 = canvas.get(0).toDataURL('image/jpeg');
		// base64からBlobデータを作成
		var barr, bin, i, len;
		bin = atob(base64.split('base64,')[1]);
		len = bin.length;
		barr = new Uint8Array(len);
		i = 0;
		while (i  len) {
			barr[i] = bin.charCodeAt(i);
			i++;
		}
		var resizeBlob = new Blob([barr], {type: 'image/jpeg'});

		callback({
			fileName: blob.name,
			ofileData: evt.target.result,
			fileData: base64,
			ofileSize: blob.size,
			fileSize: resizeBlob.size,
			fileType: resizeBlob.type
		})
		
	}
	image.src = evt.target.result;
}
fr.readAsDataURL(blob);

ソースコード

ソースコードはGitHubにて公開中です。気に入ったからは下のSNSボタンで”いいね”お願いシャス!

https://github.com/isystk/jquery-imageUploader

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。