You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
5.2 KiB
193 lines
5.2 KiB
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
<title>身份证切图</title>
|
||
|
|
<link rel="stylesheet" href="../../../lib/css/mui.min.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../../lib/css/basic.css"/>
|
||
|
|
<link rel="stylesheet" href="../../css/base.css">
|
||
|
|
<link rel="stylesheet" href="../../../lib/css/cropper.css">
|
||
|
|
<script src="../../../lib/js/mui.min.js"></script>
|
||
|
|
<script src="../../../lib/js/cropper.js"></script>
|
||
|
|
<script src="../../../lib/js/vue.js"></script>
|
||
|
|
<script src="../../../lib/js/app.js"></script>
|
||
|
|
<script src="../../js/base/rem-layout.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/my/my_ajax.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/language/wallet_language.js"></script>
|
||
|
|
<script type="text/javascript" src="../../../js/walletApp/my/my_ajax.js"></script>
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
body,
|
||
|
|
html {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#img-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#img-content #image {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fz {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="data-info">
|
||
|
|
<header class="mui-bar mui-bar-nav ">
|
||
|
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||
|
|
<a id="button" class="mui-pull-right" style="position: absolute; right: 12px;bottom: .28rem; color:#FFFFFF;" >{{langue.use}}</a>
|
||
|
|
</header>
|
||
|
|
<div id="container">
|
||
|
|
<div id="img-content">
|
||
|
|
<img id="image" alt="Picture">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="mui-btn app-btn-darkly" style="position: absolute;bottom: 0;margin: 0; height: 50px; border-radius: 0;" onclick="cropper.rotate(90);">{{langue.ratate}}</button>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
// 国际化
|
||
|
|
var langues = {
|
||
|
|
zh_CN: {
|
||
|
|
use: "使用",
|
||
|
|
ratate: "旋转",
|
||
|
|
ShowWaiting: "等待中..."
|
||
|
|
},
|
||
|
|
zh_HK: {
|
||
|
|
use: "使用",
|
||
|
|
ratate: "旋轉",
|
||
|
|
ShowWaiting: "等待中..."
|
||
|
|
},
|
||
|
|
en_US: {
|
||
|
|
use: "use",
|
||
|
|
ratate: "Ratate",
|
||
|
|
ShowWaiting: "Waiting..."
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
var dataInfo = new Vue({
|
||
|
|
el: '#data-info',
|
||
|
|
data: {
|
||
|
|
langue: langues[app.getLanguageLocalStorage()],
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function getRoundedCanvas(sourceCanvas) {
|
||
|
|
var canvas = document.createElement('canvas');
|
||
|
|
var context = canvas.getContext('2d');
|
||
|
|
var width = sourceCanvas.width;
|
||
|
|
var height = sourceCanvas.height;
|
||
|
|
|
||
|
|
canvas.width = width;
|
||
|
|
canvas.height = height;
|
||
|
|
context.imageSmoothingEnabled = true;
|
||
|
|
context.drawImage(sourceCanvas, 0, 0, width, height);
|
||
|
|
context.globalCompositeOperation = 'destination-in';
|
||
|
|
context.beginPath();
|
||
|
|
// context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
|
||
|
|
context.fill();
|
||
|
|
return canvas;
|
||
|
|
}
|
||
|
|
var cropper;
|
||
|
|
window.addEventListener('DOMContentLoaded', function() {
|
||
|
|
//获取头像图片
|
||
|
|
mui.plusReady(function() {
|
||
|
|
|
||
|
|
var image = document.getElementById('image');
|
||
|
|
var button = document.getElementById('button');
|
||
|
|
var result = document.getElementById('result');
|
||
|
|
|
||
|
|
var currentWebview = plus.webview.currentWebview();
|
||
|
|
image.src = currentWebview.imgSrc;
|
||
|
|
|
||
|
|
cropper = new Cropper(image, {
|
||
|
|
dragMode: 'move',
|
||
|
|
viewMode: 1,
|
||
|
|
aspectRatio: 85.6 / 54,
|
||
|
|
autoCropArea: 0.9,
|
||
|
|
cropBoxResizable: false
|
||
|
|
});
|
||
|
|
|
||
|
|
button.onclick = function() {
|
||
|
|
var croppedCanvas;
|
||
|
|
var roundedCanvas;
|
||
|
|
|
||
|
|
if(!cropper) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// Crop
|
||
|
|
croppedCanvas = cropper.getCroppedCanvas();
|
||
|
|
|
||
|
|
// Round
|
||
|
|
roundedCanvas = getRoundedCanvas(croppedCanvas);
|
||
|
|
var imgBase64 = roundedCanvas.toDataURL("image/jpeg", 0.7).replace("data:image/jpeg;base64,", "");
|
||
|
|
uploadStringImgFile(imgBase64);
|
||
|
|
|
||
|
|
};
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
//上传图片 返回新的图片名
|
||
|
|
function uploadStringImgFile(imgBase64Str) {
|
||
|
|
plus.nativeUI.showWaiting(dataInfo.langue.ShowWaiting);
|
||
|
|
mui.ajax(myAjaxJs.AJAX_UPLOAD_HIGH_AUTHFILE.getUrl, {
|
||
|
|
headers: {
|
||
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
file: imgBase64Str
|
||
|
|
},
|
||
|
|
dataType: 'json', //服务器返回json格式数据
|
||
|
|
type: myAjaxJs.AJAX_UPLOAD_HIGH_AUTHFILE.getType, //HTTP请求类型
|
||
|
|
timeout: 10000,
|
||
|
|
success: function(data) {
|
||
|
|
if(data.code == "200") {
|
||
|
|
setTimeout(function() {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
var src = data.data;
|
||
|
|
console.log("src: ==== " + JSON.stringify(src));
|
||
|
|
var getUserAuthView = plus.webview.getWebviewById("advanced_identity.html");
|
||
|
|
getUserAuthView.evalJS("saveAuthImg('" + src.replace(/\\/g, "\\\\") + "');");
|
||
|
|
mui.back();
|
||
|
|
}, 2000)
|
||
|
|
} else {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
mui.toast(data.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
// mui.alert("当前网络状况不佳，请稍后重试！", "提示")
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 国际化统一方法
|
||
|
|
window.addEventListener('switchLangueData', function(e) {
|
||
|
|
dataInfo.langue = langues[e.detail];
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|