input上傳圖片多圖片壓縮

upImgCompression(event){   // event：必傳change的event
		// 壓縮圖片須要的一些元素和對象
	      
	      var imgArr = [];
	      // 縮放圖片須要的canvas
	      var canvas = document.createElement('canvas');
	      var context = canvas.getContext('2d');
	      // 選擇的文件對象
	      var file = event.target.files;
	      for(let i = 0;i<file.length;i++){

	      	  var reader = new FileReader(),
	      	  	  imgFile = file[i];
		      // 選擇的文件是圖片
		      if(imgFile.type.indexOf("image") == 0) {
		          reader.readAsDataURL(imgFile);
		      }else{
			      continue;
		      }
  	          let img = new Image();
		      // 文件base64化，以便獲知圖片原始尺寸
		      reader.onload = function(e) {
		          img.src = e.target.result;
		      };
		      var imgP = new Promise(function  (resolve,reject) {
	    		      // base64地址圖片加載完畢後
				      img.onload = function() {
				          // 圖片原始尺寸
				          var originWidth = this.width;
				          var originHeight = this.height;
				          // 最大尺寸限制
				          var maxWidth = 400,
				              maxHeight = 400;
				          // 目標尺寸
				          var targetWidth = originWidth,
				              targetHeight = originHeight;
				          // 圖片尺寸超過400x400的限制
				          if(originWidth > maxWidth || originHeight > maxHeight) {
				              if(originWidth / originHeight > maxWidth / maxHeight) {
				                  // 更寬，按照寬度限定尺寸
				                  targetWidth = maxWidth;
				                  targetHeight = Math.round(maxWidth * (originHeight / originWidth));
				              } else {
				                  targetHeight = maxHeight;
				                  targetWidth = Math.round(maxHeight * (originWidth / originHeight));
				              }
				          }
				          // canvas對圖片進行縮放
				          canvas.width = targetWidth;
				          canvas.height = targetHeight;
				          // 清除畫布
				          context.clearRect(0, 0, targetWidth, targetHeight);
				          // 圖片壓縮
				          context.drawImage(img, 0, 0, targetWidth, targetHeight);
				          var base64 = canvas.toDataURL("image/png",0.8);
				          
				          resolve(base64);
				      };
			  });

			  imgArr.push(imgP);

		  }
		return Promise.all(imgArr);
	}

　　

<input type="file" multiple accept="image/*" onchange="handleImgUpload"/>
// 使用方法 
upImgCompression(event).then(res=>{
    // 結果 
    console.log(res);
})

　　

 

 

 

常常遇到多圖片上傳，而後轉成base64。在不壓縮的狀況下會特別的大。由於常常用我就簡單的封裝下，圖片壓縮成功之後會轉成base64並放到數組裏面返回。

由於是用es6寫的須要babel轉成es5瀏覽器才能支持。