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代码: