mui 移动端调用相册或拍照，截图后上传到服务器端实例

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>更改图像</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/hr.css" rel="stylesheet" />
<link href="css/cropper.min.css" rel="stylesheet">
<style type="text/css">
.ctable{
margin-top: 10px;
width: 100%;
text-align: center;
}
.ctable td{
font-size: 12px;
padding: 5px;
}
.ctable td button{
width: 100px;
height: 50px;
font-size: 12px;
}
.choiceDiv{
text-align: center;
border: solid 1px;
margin: 10px;
min-height: 320px;
background-color: #888888;
}
img{
max-width: 100%;
}
#choiceImg{
width: 300px;
height: 300px;
margin: 10px;
}
</style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">修改图像</h1>
</header>
<div class="mui-content">
<table class="ctable">
<tbody>
<tr>
<td>
<button type="button" class="mui-btn mui-btn-purple" id="cameraBtn">拍照</button>
</td>
<td>
<button type="button" class="mui-btn mui-btn-purple" id="galleryBtn">相册</button>
</td>
</tr>
</tbody>
</table>
<div class="choiceDiv">
<img id="choiceImg" />
</div>
<table class="ctable">
<tbody>
<tr>
<td>
<button type="button" class="mui-btn mui-btn-grey" id="qxBtn">旋转</button>
</td>
<td>
<button type="button" class="mui-btn mui-btn-blue" id="preBtn">预览</button>
</td>
<td>
<button type="button" class="mui-btn mui-btn-danger" id="bigBtn">确定</button>
</td>
</tr>
</tbody>
</table>
<div id="popover" class="mui-popover hrcenter">

</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/cropper.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
var cameraBtn = document.getElementById("cameraBtn");
var galleryBtn = document.getElementById("galleryBtn");
cameraBtn.addEventListener("tap",function(){//调用系统相机
var camera = plus.camera.getCamera();
camera.captureImage(function(file){
showImage(file);
},function(error){
console.log("cameraBtn error: "+JSON.stringify(error));
},{index:'2'});
},false);
galleryBtn.addEventListener("tap",function(){
plus.gallery.pick(function(file){
showImage(file);
},function(error){
console.log("galleryBtn error: "+JSON.stringify(error));
},{ filter: 'image',multiple: false})
},false);

var choiceImg = document.getElementById("choiceImg");
var lastFile = "";
var croppedCanvas ;

function showImage(file){
plus.io.resolveLocalFileSystemURL(file,function(url){
url.file(function(file){
console.log(file.size);
if(file.size>app.IMG_SIZE){
var scap = file.size>app.IMG_SIZE*2?'20%':'50%';
compressImage(url.toLocalURL(),scap);
}else{
choiceImg.src = url.toLocalURL();
console.log(url.toLocalURL());
if(lastFile && lastFile!=url.toLocalURL()){
$('#choiceImg').cropper('reset').cropper('replace', url.toLocalURL());
}else{
$('#choiceImg').cropper("getCroppedCanvas",{
aspectRatio: 1/1,
autoCropArea: 0.8
});
}
lastFile = url.toLocalURL();
}
});
});
}

// 压缩图片
function compressImage(src,scap){
console.log("src:"+src);
var dst = src.substr(src.lastIndexOf("."));
plus.nativeUI.showWaiting();
plus.zip.compressImage({
src:src,
dst:src,
quality:100,
overwrite:true,
// width:scap
width:'1000px',
height:'1000px'
},
function(i){
plus.nativeUI.closeWaiting();
choiceImg.src = i.target;

if(lastFile && lastFile != i.target){
$('#choiceImg').cropper('reset').cropper('replace', i.target);
}else{
$('#choiceImg').cropper("getCroppedCanvas",{
aspectRatio: 1/1,
autoCropArea: 0.8
});
}
lastFile = i.target;
},function(e){
plus.nativeUI.closeWaiting();
console.log("压缩图片失败: "+JSON.stringify(e));
});
}

var qxBtn = document.getElementById("qxBtn");
qxBtn.addEventListener("tap",function(){
// mui.back();
$('#choiceImg').cropper('rotate','90');
});

var preBtn = document.getElementById("preBtn");
preBtn.addEventListener("tap",function(){
if(!lastFile){
return ;
}
croppedCanvas = $("#choiceImg").cropper('getCroppedCanvas');
var roundedCanvas = app.getRoundedCanvas(croppedCanvas);
document.getElementById("popover").innerHTML = '<img src="' + roundedCanvas.toDataURL() + '">';
mui(".mui-popover").popover("toggle", preBtn);
});

var bigBtn = document.getElementById("bigBtn");
bigBtn.addEventListener("tap",function(){
croppedCanvas = $("#choiceImg").cropper('getCroppedCanvas');
var roundedCanvas = app.getRoundedCanvas(croppedCanvas);
var base64Data = roundedCanvas.toDataURL();
var params = {};
var t = lastFile.lastIndexOf(".");
var type = lastFile.substr(t);
params.account = app.getState().account;
params.functionName = "mobileChangeLogo";
params.baseData = base64Data;
params.type = type;
app.postHandler(params,function(result){
console.log(result.state);
app.setLogo(roundedCanvas.toDataURL());
var pcw = plus.webview.getWebviewById("setting_four.html");
pcw.evalJS("logoHandle('"+base64Data+"')");
mui.back();
});
},false);
});

</script>
</body>

</html>

服务器端servlet处理
-----------------------
/**
* 将字符串转为图片
* @param imgStr
* @return
*/
public static boolean generateImage(String imgStr, String imgFile)
throws Exception {// 对字节数组字符串进行Base64解码并生成图片
if (imgStr == null) // 图像数据为空
return false;
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解码
byte[] b = decoder.decodeBuffer(imgStr);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 调整异常数据
b[i] += 256;
}
}
// 生成jpeg图片
String imgFilePath = imgFile;// 新生成的图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
return true;
} catch (Exception e) {
throw e;
}
}

mui 移动端调用相册或拍照，截图后上传到服务器端实例

猜你喜欢