您的位置:首页 > 移动开发

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

2017-09-13 16:19 316 查看
解决思路:

   方法一:将图片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代码:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  app 压缩 上传图片