前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>智慧付油</title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="js/plugins/cropper/css/cropper.min.css"/>
<style type="text/css">
body{
background-color: #EEEEEE
}
#imgBox{
height: 250px!important;
width: 250px!important;
margin: 70px auto;
background: url('js/plugins/cropper/images/bg.png');
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #18538D;">
<a href="index.html" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav" style=""></span>返回
</a>
<h1 class="mui-center mui-title" style="color: white;">图片上传</h1>
<a id="moreMenus" class="mui-icon mui-icon-compose mui-pull-right" font-weight: bold;"></a>
</header>
<div class="mui-content" style="background-color: #EEEEEE;">
<div id="imgBox">
<img id="userImage_id" width="250" height="250" />
</div>
<table align="center">
<tr>
<td style="padding:0px 5px;"><button type="button" disabled id="scaleX_id" class="mui-btn mui-btn-blue toolbutton">左右变换</button></td>
<td style="padding:0px 5px;"><button type="button" disabled id="scaleY_id" class="mui-btn mui-btn-blue toolbutton">上下变换</button></td>
<td style="padding:0px 5px;"><button type="button" disabled id="rotateMax_id" class="mui-btn mui-btn-blue toolbutton">旋转90°</button></td>
</tr>
<tr>
<td colspan="3" style="padding:50px 10px;"><button type="button" disabled id="confirm_id" class="mui-btn mui-btn-blue mui-btn-block toolbutton">确定并保存</button> </td>
</tr>
</table>
<!--<div style="padding: 10px; color:red;">
</div>-->
</div>
<script src="js/mui.min.js"></script>
<script src="js/server.js"></script>
<script type="text/javascript" src="js/plugins/jquery-3.1.1.slim.min.js" ></script>
<script type="text/javascript" src="js/plugins/cropper/js/cropper.min.js" ></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
plus.navigator.setStatusBarBackground( "#1FBBA6" );
document.getElementById("moreMenus").addEventListener("tap" , function(){
var editButtons = new Array();
editButtons.push({title:"拍照上传",style:"default"});
editButtons.push({title:"从相册选择",style:"default"});
plus.nativeUI.actionSheet( {
cancel:"取消",
buttons:editButtons
}, function(e){
var index = e.index;
switch (index){
case 1:
captureImage();//拍照
break;
case 2:
selectImage();//相册选择
break;
}
});
});
document.getElementById("scaleX_id").addEventListener("tap" , function(){
window._scaleX = window._scaleX * -1;
$("#userImage_id").cropper("scaleX" , window._scaleX);
});
document.getElementById("scaleY_id").addEventListener("tap" , function(){
window._scaleY = window._scaleY * -1;
$("#userImage_id").cropper("scaleY" , window._scaleY);
});
document.getElementById("rotateMax_id").addEventListener("tap" , function(){
$("#userImage_id").cropper("rotate" , 90);
});
//确定裁切
document.getElementById("confirm_id").addEventListener("tap" , function(e){
var dataURL = $("#userImage_id").cropper("getCroppedCanvas" , {
width: 300 , height: 300
});
var imgUrl = dataURL.toDataURL("image/png", 1);
//$("#userImage_id").attr("src" , imgUrl);
$("#userImage_id").cropper("replace" , imgUrl);
$("#userImage_id").cropper("clear");//裁切完成取消显示裁切框
$("#userImage_id").cropper("disable");
window.imageDisable = true;
$("button.toolbutton").prop("disabled" , true);
uploadFile(imgUrl);
});
//初始化裁切组件
initImageCropper();
});
//拍照
function captureImage(){
var cmr = plus.camera.getCamera(2);
cmr.captureImage(
function(path){
//将图片地址转换
plus.io.resolveLocalFileSystemURL(path , function(entry){
var newPath = entry.toLocalURL() + "?version=" + Math.random();
loadImage(newPath);
});
},
function(error){
mui.toast(error.message);
},
{
filename: "_documents/"
}
);
}
//文件上传
function uploadFile(image){
var p_url = server_address+ "/uploadTest";
mui.ajax(p_url , {
dataType: "json",
type: "post",
data: {
imageBase64: image
},
success: function(data){
mui.toast(data.result);
mui.alert(data.url);
document.write(data.url);
},
error: function(a,b,c){
mui.toast(data.result);
}
});
}
function initImageCropper(){
//初始化组件
$("#userImage_id").cropper({
aspectRatio: 3/3 ,
autoCropArea: 1,
dragMode: "move",//设置移动图片、重新绘制选图区域
cropBoxResizable: false,
//movable: true,//是否允许移动裁切框
zoomable: true,//是否允许放大图片
guides: true,//取消显示裁切线中间的虚线网格
minContainerWidth: 300,
minContainerHeight: 300,
minCanvasWidth: 300,
minCanvasHeight: 300,
crop: function(data){
//初始化
window._scaleX = data.scaleX;
window._scaleY = data.scaleY;
}
});
}
//选择图片
function selectImage(){
plus.gallery.pick(function(path){
loadImage(path);
}, function(e){
mui.toast("没有选择图片.");
});
}
//确定选择图片
function loadImage(path){
var img = document.getElementById("userImage_id");
img.src = path;
if(window.imageDisable == true){
$("#userImage_id").cropper("enable");
}
$("#userImage_id").cropper("replace" , path);
//启用几个功能按钮
$("button.toolbutton").prop("disabled" , false);
document.getElementById("userImage_id").onclick = function(){
plus.runtime.openFile(path);
}
}
</script>
</body>
</html>
后