MUI+AJAX+Spring MVC 实现照片拍摄和本地相册选取上传

http://blog.csdn.net/backzero333/article/details/58744798

（1）首先贴上的是JS代码

*拍照上传*/

function getImage() {

var camera = plus.camera.getCamera();
//生成时间戳 
var timestamp = Date.parse(new Date());
camera.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e,function(entry){
console.log('获取图片地址');
var imgUrl = entry.toLocalURL();
console.log("imgURL  "+imgUrl);
/*调用上传图片方法*/
uploadHead(imgUrl);
},function(e){
console.log("读取拍照文件错误：" + e.message);
mui.alert("读取拍照文件错误");
},function(e){
console.log("调用摄像头异常：" + e.message);
mui.alert("调用摄像头异常");
},{
filename: timestamp+"-img.png"
});
});

}

/*本地相册上传*/
function galleryImg() {
console.log("打开相册");
//生成时间戳 
var timestamp = Date.parse(new Date());
plus.gallery.pick(function(img) {
console.log("选取图片相册");
plus.io.resolveLocalFileSystemURL(img,function(entry){
console.log("获取图片地址");
var imgUrl = entry.toLocalURL();
/*调用上传图片方法*/
uploadHead(imgUrl);
},function(e){
console.log("读取图片错误：" + e.message);
mui.alert("读取图片错误");
},function(e){
console.log("选取图片异常：" + e.message);
mui.alert("选取图片异常");
},{
filename: timestamp+"-img.png"
});


});

};

//上传图片
function uploadHead(imgPath) {
console.log("imgPath = " + imgPath);
// mainImage.src = imgPath;
// mainImage.style.width = "60px";
// mainImage.style.height = "60px";


var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
console.log("imgData"+imgData);
/*在这里调用上传接口*/
$.ajax({
url:baseURL+“/imgeupload”,
data:{
"imgBase64Data":imgData
},
dataType: 'json',
type: 'post',
timeout: 10000,
success: function(data) {
console.log('上传成功');
},
error: function(xhr, type, errorThrown) {
console.log(errorThrown);
mui.toast('网络异常，请稍后再试！');
}
});
}
}

//将图片压缩转成base64
function getBase64Image(img) {
//绘制图形
var canvas = document.createElement("canvas");
var width = img.width;
console.log(width);
var height = img.height;
console.log(height);
// 这里对图片大于300*400的进行压缩
if(width > height) {
if(width > 300) {
height = Math.round(height *= 300 / width);
width = 300;
}
} else {
if(height > 400) {
width = Math.round(width *= 400 / height);
height = 400;
}
}
canvas.width = width; /*设置新的图片的宽度*/
canvas.height = height; /*设置新的图片的长度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); /*绘图*/
var dataURL = canvas.toDataURL("image/png", 0.5);
console.log(dataURL);
return dataURL.replace("data:image/png;base64,", "");
}

（2）后台处理代码

@ResponseBody@RequestMapping( value = "/img_upload")public WrapperResponseEntity imgUpload(@RequestParam String imgBase64Data, HttpServletRequest request){    WrapperResponseEntity entity = new WrapperResponseEntity();    try {        if(imgBase64Data == null || "".equals(imgBase64Data)){                entity.setData("上传失败，上传图片数据为空！");        }       String projectPath = request.getSession().getServletContext().getRealPath("/");        String context = request.getContextPath();        String imgFilePath ="/userfiles/images/";        File uploadPathFile = new File(projectPath+imgFilePath);        //创建父类文件        if(!uploadPathFile.exists() && !uploadPathFile.isDirectory()){            uploadPathFile.mkdirs();        }        File imgeFile = new File(projectPath+imgFilePath,new Date().getTime()+".jpg");        if(!imgeFile.exists()){            imgeFile.createNewFile();        }        //对base64进行解码        byte[] result = Encodes.decodeBase64(imgBase64Data);        //使用Apache提供的工具类将图片写到指定路径下        FileUtils.writeByteArrayToFile(imgeFile,result);        entity.setData(imgFilePath+imgeFile.getName());        System.out.println(imgFilePath+imgeFile.getName());    }catch (Exception e){        e.printStackTrace();        entity.setData("上传失败，系统异常");    }    return entity;}

/** * Base64解码. */public static byte[] decodeBase64(String input) {   return Base64.decodeBase64(input.getBytes());}

说明：这里只能实现单张图片的上传。

版权声明：本文为博主原创文章，未经博主允许不得转载。