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,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 || "".equalsimgBase64Data)){
                entitysetData("上传失败，上传图片数据为空！")        }
       String projectPath = requestgetSessiongetServletContextgetRealPath"/"        String context getContextPathString imgFilePath ="/userfiles/images/"File uploadPathFile File(projectPath+imgFilePath
        //创建父类文件
        (!uploadPathFileexists() && !uploadPathFileisDirectory()){
            uploadPathFilemkdirs        File imgeFile +imgFilePathDategetTime+".jpg"        if!imgeFile            imgeFilecreateNewFile//对base64进行解码
byte[] result = Encodes.decodeBase64//使用Apache提供的工具类将图片写到指定路径下
        FileUtils.writeByteArrayToFile(imgeFile        entity(imgFilePath+imgeFilegetName())System.outprintln    }catch (Exception e        eprintStackTrace"上传失败，系统异常"    return entity;
}

/**
 * Base64解码.
 */
public static byte[] decodeBase64input) {
   return Base64inputgetBytes}

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