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浏览器才能支持。