前端H5压缩图片

Js端

//创建画布实现压缩功能
var compressImg = {  
        compress: function(source_img_obj, quality, output_format){  
             var mime_type = "image/jpeg";  
             if(output_format!=undefined && output_format=="png"){  
                mime_type = "image/png";  
             }  
             var cvs = document.createElement('canvas');  
             //图片的真实高
             var finalHeight = source_img_obj.naturalHeight;
             //图片的真实宽
             var finalWidth = source_img_obj.naturalWidth;
             //当图片的宽度大于600，则将宽度压缩到600，高度按比例缩小
             if(parseInt(source_img_obj.naturalWidth) > 600){
             	var proportion = parseInt(source_img_obj.naturalWidth)/600;
             	finalHeight = source_img_obj.naturalHeight/proportion;
             	finalWidth = 600;
             }
             //naturalWidth真实图片的宽度  
             cvs.width = finalWidth;  
             cvs.height = finalHeight;  
             var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0,source_img_obj.naturalWidth,source_img_obj.naturalHeight,0,0,finalWidth,finalHeight);  
             var newImageData = cvs.toDataURL(mime_type, quality/100);  
             var result_image_obj = new Image();  
             result_image_obj.src = newImageData;  
             return result_image_obj;  
        },  
        function(){}
};

//文件上传事件
function doUpload() {

	var imageValue = null;
	var files = event.target.files;
	var fileNames = "";
	recursionFiles(files, 0 ,fileNames);
}

//文件压缩上传递归
function recursionFiles(files ,count ,fileNames){
	var len = files.length;
	if(count <= len-1){
		var reader = new FileReader();
	  reader.onload = (function(theFile) {
	      return function(e) {
	         var iTemp = $("<img/>").appendTo("body");
	         var i = iTemp[0];
	         i.src = event.target.result;  
	         $(i).css('width',$(i).width()/10+'px');  
	         var quality =  50;  
	         var imgBase64Src = compressImg.compress(i,quality).src;  
	         i.src = imgBase64Src;  
	         i.style.display = "none";  
	         
			 var blob = dataURLtoBlob(imgBase64Src);
			 var fd = new FormData();
             //第一个参数是后台用来接受文件的名称
             //第二个参数是图片文件的blob
             //第三个参数是文件的文件名称
			 fd.append("updFile", blob,"updFile");
			 //使用ajax发送
	         $.ajax({
	     		url : "FileUpload",
	     		type : "POST",
	     		enctype: 'multipart/form-data',
	     		data : fd,
	     		async : false,
	     		cache : false,
	     		contentType : false,
	     		processData : false,
	     		success : function(returndata) {
	     			//TODO 单个文件上传成功后的操作
	     			count++;
	     			recursionFiles(files,count,fileNames);
	     		},
	     		complete : function(XMLHttpRequest, textStatus) {
	
	     			// 从http头信息取出 在filter定义的status，判断是否是 timeout
	     			if (XMLHttpRequest.status == 403) {
	     				// 登录画面跳转
	     				location.href = "ToLoginCode";
	     			}
	     		},
	     		error : function(returndata) {
	
	     		}
	     	});
	         
	      };  
	  })(files[count]);
	  reader.readAsDataURL(files[count]);
	} else {
		//TODO 所有文件压缩上传后做的操作
	}
}

接下来是html页面

<!-- html中值需添加一个input标签 -->
<!-- accept="image/*"这个属性加完后好像弹出选择文件变慢了，也可以使用 accept=".jpg,.png"这种感觉快一点 -->
<input name="uptFile" type="file" onchange="doUpload()" accept="image/*" multiple="multiple"/>

Java端就不传了，就是正常的单个文件上传，这种方法有个弊端，就是客户端多次的像服务器端发送请求，还有一种方法，就是先用递归将所有的图片压缩完，每压缩一个图片创建一个画布，这样到ajax上传文件的时候，循环所有的画布，把blob添加到FormData里面（注意压缩方法中的图片名称设置），一起传到后台

转载于:https://my.oschina.net/daoxin/blog/756662