java图片上传(2)----base64压缩图片

本篇是用base64技术进行上传图片。

前端进行压缩生成base64，后端接收base64字符串，进行解码，通过流保存到服务器文件夹上。

重点在于：压缩图片（canvas）和base64（FileReader）

页面元素：

<input type="file" id="img" name="img"/>
	        <img id="picture" style="width:400px;height:400px;display:none" />
	        <input type="hidden" name="headImg" id="headImg"/>

　

js：

<script>
$(function(){
	var prefixUrl="localhost:8081"
	$("#img").change(function(){
		base64Util($("#img")[0].files[0],400,function(base64){
			$("#headImg").val(base64)
			//上传到后台服务器，路径保存到数据库
			$.ajax({
				type:'post',
				data:{'base64Str':base64},
				url:"http://"+prefixUrl+"/base64Upload",
				dataType:'json',
				cache:false,
				success:function(data){
					$("#picture").attr("src","http://"+data.webUrl)
					$("#picture").show()
					$("#headImg").val(data.path)
				}
			})
		})
	})
})

function base64Util(file,maxLen,callBack){
	var reader=new FileReader();
	var image=new Image();
	var maxSize=210000;
	var base64Str;
	if(file){
		//将文件转为DataUrl
		reader.onload = function(e){
			base64Str=reader.result;
			image.src=base64Str;
		}
		//压缩图片
		image.onload=function(){
			//获取原图比例
			var width=image.width;
			var height=image.height;
			//压缩比例
			var rate=1;
			if(width>=height){
				if(width>maxLen){
					rate=maxLen/width;
				}
			}else{
				if(height>maxLen){
					rate=maxLen/height;
				}
			}
			image.width=rate*width;
			image.height=rate*height;
			//生成canvas
			var canvas=document.createElement("canvas");
			var ctx=canvas.getContext("2d");//获取二位画布绘图环境
			//设置画布宽高
			canvas.width=image.width;
			canvas.height=image.height;
			//画到canvas上
			ctx.drawImage(image,0,0,image.width,image.height);
			//转成base64
			//计算大小，如果大于2M压缩大小
			var maxSize=2;var fileSize=file.size/(1024*1024);var qua=1;
			var base64,newFile;
			if(fileSize>maxSize){
				qua=maxSize/fileSize;
				console.log("qua:"+qua)
				base64=canvas.toDataURL('image/jpeg',qua);
				newFile=dataUrlToFile(base64,file.name);
			}else{
				console.log("rate:"+rate)
				base64=canvas.toDataURL('image/jpeg',rate);
				newFile=dataUrlToFile(base64,file.name);
			}
			callBack(base64)
		}
		reader.readAsDataURL(file);
	}
}

function dataUrlToFile(dataUrl,fileName){
	var arr=dataUrl.split(',');
	var mine=arr[0].match(/:(.*?);/)[1];
	var bstr=window.atob(arr[1]),
		n=bstr.length,
		u8arr=new Uint8Array(n);
	while(n--){
		u8arr[n]=bstr.charCodeAt(n);
	}
	return new File([u8arr],fileName,{type:mine});
}
</script>

　　

controller：

@RequestMapping(value="base64Upload",method={RequestMethod.POST})
	public @ResponseBody String base64Upload(HttpServletRequest request){
		String base64Str=request.getParameter("base64Str");
		if(MyUtils.StringIsNull(base64Str)){
			return "请上传图片";
		}
		try {
			//后缀
			String extension=base64Str.substring(base64Str.indexOf("/")+1,base64Str.indexOf(";"));
			//处理前缀，不然图片会损坏
			String imgContent=base64Str.substring(base64Str.indexOf("base64,")+7,base64Str.length());
			BASE64Decoder decoder=new BASE64Decoder();
			byte[] bs=decoder.decodeBuffer(imgContent);
			for(int i=0;i<bs.length;i++){
				if(bs[i]<0){
					//修正异常：+号可能会变成空格
					bs[i]+=256;
				}
			}
			String name=""+System.currentTimeMillis();
			//获取后缀
			extension=MyUtils.imageFormat(extension);
			//相对路径
			String path="/WEB-INF/sources/upload/";
			//绝对路径
			String url=request.getSession().getServletContext().getRealPath("")+path+name+"."+extension;
			//网站路径
			String webUrl=request.getRequestURL()+path+name+"."+extension;
			webUrl=webUrl.replaceAll("http://", "").replaceAll("/base64Upload/WEB-INF", "");
			webUrl="{\"webUrl\":\""+webUrl+"\",\"path\":\"/sources/upload/"+name+extension+"\"}";
			File dir=new File(path);
			if(!dir.exists()){
				dir.mkdirs();
			}
			
			OutputStream os=new FileOutputStream(new File(url));
			os.write(bs);
			os.flush();
			os.close();
			return webUrl;
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return "";
	}

　　

MyUtis

public class MyUtils {
	public static boolean StringIsNull(String str){
		if(str !=null && !str.equals("")){
			return false;
		}
		return true;
	}
	
	public static String imageFormat(String extension){
		if(extension.equals("jpeg")){
			extension="jpg";
		}else if(extension.equals("png")){
			extension="png";
		}else if(extension.equals("gif")){
			extension="gif";
		}
		return extension;
	}
}