画像圧縮パッケージをアップロード

写真のアップロードアップロード画像は通常、大きな画像のサイズは、アップロードを圧縮さを考慮して、一方では、他の一方で、サーバーへの圧力を軽減するだけでなく、ユーザーエクスペリエンスを向上させるために、アップロード時間を短縮です。
画像圧縮は、キャンバスのdrawImageメソッドで画像を圧縮することができます。
メソッドを呼び出すことでUpladFile、および関連するパラメータを渡します。
ID：id値入力ボックス
住所背景アップロードファイル：URL
MAXNUM：最大サイズ - ユニットM
OBJ：パラメータオブジェクトは、幅、高さ、品質などの属性を持つことができます
/ * 
ファイル：ファイル（画像フォーマットタイプ）、
W：バイトファイルの幅が圧縮され、幅が小さく、小さい
objDiv：容器またはコールバック関数である
* / 
objDiv、関数photoCompress（ファイル、W ）{ 
	VAR READYが（FileReaderの新しい新しい=）を、
	読み出し動作が完了したときonloadend設定されたイベントハンドラがある場合/ *指定された開始Blobオブジェクトやファイルオブジェクトの内容を読み取り、readyStateのプロパティは、DONEになります。同時に呼び出しで、データを含む属性をもたらす：..読み出しファイル* /の内容表現するURL形式の文字列
	ready.readAsDataURL（ファイル）; 
	ready.onload =関数（）{ 
		VARのRe = this.result ; 
		canvasDataURL（RE、W、objDiv）; 
	} 
} 
関数canvasDataURL（パス、OBJ、コールバック）{ 
	VARのIMG =新たな新たな画像（）; 
	img.src =パス; 
	img.onload =関数（）{ 
		VAR =このこと; 
		/ /デフォルトのスケール圧縮
		VAR W = that.width、 
			H = that.height、
			スケール= W / H。
		ワット= obj.width || ワット; 
		H = obj.height || （W /スケール）。
		VAR品質= 0.7。//默认图片质量为0.7 
		//生成キャンバス
		VARキャンバス=のdocument.createElement（ 'キャンバス'）。
		VaRのCTX = canvas.getContext（ '2D'）; 
		//创建属性节点
		VAR ANW = document.createAttribute（ "幅"）; 
		anw.nodeValue = W。
		VaRの無水= document.createAttribute（ "高さ"）; 
		anh.nodeValue = H; 
		canvas.setAttributeNode（ANW）。
		canvas.setAttributeNode（無水）。
		ctx.drawImage（H、W、0、0、すなわち）。
		//图像质量
		（obj.quality && obj.quality <= 1 && obj.quality> 0）であれば{ 
			品質= obj.quality。
		} 
		VARのBASE64 = canvas.toDataURL（」
		//コールバック関数の戻り値は、base64で
		必要に応じて、//表示画像
		// document.querySelectorAll（ '＃preImg'）[0] = BASE64 .SRC; 
		コールバック（BASE64）; 
	} 
} 
/ ** 
 *画像はBASE64意志BLOBにURLデータ
 * @param URLData 
 URLの方法で表される* Base64で画像データ
 * / 
関数convertBase64UrlToBlob（URLData）{ 
	VARのurlData.splitのARR =（ ''）、MIME ARR = [0] .match（/ :( 。？*）; [1] /）、
		BSTR =のatoB（ARRの[1]）、= N-bstr.length、新しい新しいUint8Arrayのu8arr =（N-）; 
	一方（N--）{ 
		u8arr [N- = bstr.charCodeAt （N-）; 
	} 
	新しい新しいブロブ（[u8arr]、{タイプ：MIME}）を返す; 
} 
VARのXHRを; 
//アップロード方法を
// OBJ渡すことができるパラメータの品質の高さ幅
関数UpladFile（ID、URL、MAXNUM、OBJ）{ 
			XHRを。onloadイベント= uploadComplete; //リクエストが完了すると
	VARもしfileobj =のdocument.getElementById（ID）.files [0]; // JS 取得したファイルオブジェクト
	VARのURL = URL;受信したアップロード背景の//アドレス
	VARフォーム=新しいいるFormData（）; //いるFormData オブジェクト

	（fileobjの場合。サイズ/> 1024 1024 * MAXNUM） {// 1M、圧縮アップロードより大きい
		photoCompress（もしfileobj、OBJ}、関数（base64Codes）{ 
			にconsole.log（ "圧縮" + base64Codes.length / 1024 + " " + base64Codes） ; 
			VAR BL = convertBase64UrlToBlob（base64Codes）; 
			form.append（ "ファイル"、BL、 "_ファイル" + Date.parse（新しい新しい日付（））+ "JPG"）; //ファイルオブジェクト
			XHR =新しいXMLHttpRequestを（）; // XMLHttpRequestオブジェクトの
			xhr.open（、「ポスト」のURL、真の）; //ポストの実施例では、サーバーアドレスのURLリクエスト、真このパラメータは、要求が非同期プロセスであるかどうかを指定します。
			xhr.onerror = uploadFailed; //要求が失敗しました

			xhr.uploadを.onprogress = progressFunction。//メソッドを呼び出し、[達成された進展をアップロード]
			xhr.upload.onloadstart =関数（）{//開始アップロード方法
				OT =新しいDate（）getTime（ ）;. // アップロードする開始時刻設定
				= 0をoloadedを、アップロードはファイルサイズをアップロードし始めたときに//セット0 
			}; 

			xhr.send（フォーム）;アップロード、フォームデータの送信を開始// 
		}、OBJ）; 
	} //他{少ない1M画像アップロード
		form.append（ "ファイル"、fileobjの） ; // ファイルオブジェクト
		XHR =新しいXMLHttpRequestを（）; // XMLHttpRequestのオブジェクト
		xhr.open（「ポスト」は、URL、真の）; //ポストの実施例では、サーバーアドレスのURL要求が、真のこのパラメータは、要求が非同期処理であるかどうかを指定します。
		xhr.onload = uploadComplete; //要求が完了し
		xhr.onerror = uploadFailed; //要求失敗

		xhr.upload.onprogress = progressFunction; //アップロード進捗が実装呼び出す方法[] 
		xhr.upload.onloadstart =関数（）{//アップロードこの方法は、実行開始し 
			OT =新しいDate（）getTime（ ）;. // アップロードする開始時間を設定します
			oloaded = 0; //アップロード開始時間を設定し、ファイルサイズをアップロードすることである0 
		}; 

		xhr.send（フォーム）;アップロード、フォームデータ送信を開始// 
	} 
} 

//成功応答アップロード
機能uploadComplete（EVT）を{ 
	//完全に受信したファイルサービスの結果が返さオフ

	VAR = JSON.parseデータ（evt.target.responseTextを）; 
	IF（data.success）{ 
		にconsole.logは（ "正常にアップロード！"）; 
	} {他
		にconsole.logは（「アップロードに失敗しました！ "）; 
	} 

} 
//アップロードに失敗した
関数uploadFailed（EVT）{ 
	にconsole.log（" ;!アップロードが「失敗を）
} 
//アップロードキャンセル
機能cancleUploadFileを（）{ 
	xhr.abort（）; 
} 

//進捗実装をアップロードアップロードプロセスが頻繁にこのメソッドを呼び出す
progressFunction（EVT）{機能
	VARプログレス=のdocument.getElementById（ "プログレスバーを"）; 
	VAR percentageDiv =のdocument.getElementById（ "パーセンテージ"）; 
	//を送信する必要がevent.totalありますバイトの総数は、event.loadedバイトが既に転送されます。event.lengthComputableが真でない場合は、0に等しいevent.total
	（evt.lengthComputable）IF {// 
		progressBar.max = evt.total; 
		progressBar.value = evt.loaded; 
		percentageDiv.innerHTML =恐らくMath.round（evt.loaded / evt.total * 100）+ "％"; 
	} 
	VAR =のdocument.getElementById時間（ "時間"）; 
	VAR新しい新しいNTは、日付を（=）getTime（）;. //現在の時間を取得
	するvar pertime =（NT-OT） / 1000; // このメソッドは、計算の最後の呼び出し今Sの単位で時間差
	。OT =新しい新しい日付（）getTime（）; //次の計算のために、時間を再割り当て
	するvar perload = evt.loaded - oloaded; //アップロードファイルサイズのセグメントを計算し、ユニットB 
	oloaded = evt.loaded; //次の計算のためにアップロードされたファイルのサイズを再割り当て
	算出//アップロード速度
	= perload / pertime VAR速度; //ユニットB / Sの
	VAR =速度bspeed; 
	VAR単位=「B / S '; //名前の 
		単位=' K / S「;
	} 
	{（速度/ 1024> 1）場合 
	の場合（速度/ 1024>1）{
		速度=速度/ 1024;
		速度=速度/ 1024; 
		単位= 'M / S'; 
	} 
	速度speed.toFixed =（1）; 
	//時間残り
	のvar resttime =（（evt.total-evt.loaded ）/ bspeed）.toFixed（1）。 
	console.log（ '速度' +速度+部+ '残り時間' + + resttime 'S'）; 
	IF（bspeed == 0）はconsole.log（ 'アップロードキャンセル'）; 
}
画像圧縮パッケージをアップロード

おすすめ
