app客户端上传图片实现方式

解决思路：

   方法一：将图片Base64编码成字符串提交到服务器，然后服务器将提交过来的Base64编码字符串解码成图片。

   方法二：采用表单方式提交图片，主要使用FileReader和FormData类

方案一：

图片压缩base64编码成字符串：

 

/*压缩图片并将图片转换成base64，以便ajax提交数据 path:图片的路径*/  
			function toBase64Image(path){
				var img = new Image();
				img.src = path;
				img.onload = function(){
					var that = this;
				    //生成比例 
				    var w = that.width,
				    h = that.height,
				    scale = w / h; 
				    w = 720 || w;              //720  你想压缩到多大，改这里
				    h = w / scale;
				    //console.log("w:"+w +" h:"+h); 
				    // 生成canvas
				    var canvas = document.createElement('canvas');
				    var ctx = canvas.getContext('2d');
				    $(canvas).attr({width : w, height : h});
				    ctx.drawImage(that, 0, 0, w, h);
				    var base64Picture = canvas.toDataURL('image/png', 1 || 0.8 );
				    console.log("图片的base64:"+base64Picture);
				}
			} 

 

demo 截图

 

拍照|选择图片上传demo 源码

 

上传图片保存图片
		 
		保存图片
		 
		

formData保存图片

• 拍照
• 相册选取

• 取消

 

 

 

 

服务器端接收客户端上传的图片base64编码：

 

@RequestMapping(value = "uploadData", method = {RequestMethod.POST}, produces = { "application/json;charset=UTF-8" })
	@ResponseBody
	public String uploadData(HttpServletRequest request) throws Exception {
		String url = ParamConst.QUERY_ASSET_CARD;
		
		String base64Image  = request.getParameter("base64Image"); //图base64编码字符串
		String pictureName  = request.getParameter("pictureName");
		String base64img = base64Image.substring(22, base64Image.length());//去掉base64前面22个字符 data:image/png;base64,是固定值 
		logger.info("图片的名称："+pictureName);
		logger.info(base64img);
		
		//保存图片路径
		String savePath = request.getRealPath("/")+"resources\\platform\\images\\";
		String filePath = savePath ;
		logger.info(" 图片保存路径："+ savePath);
		//保存图片
		Base64Image.GenerateImage(base64img, savePath, pictureName);
		...
		....
		.....
	}
}	

 

 

 

Base64编码解码类：将指定的图片base64编码成字符串，将base64编码字符解码生成图片

 

empty

 

 

 

 

方案二：

客户端截图：

 

服务器端servlet代码: