解决思路:
方法一:将图片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代码: