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
<!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 app-header app-header-darkly"> |
|
<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:#333333;">{{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, currentWebview.imgKey); |
|
|
|
}; |
|
}) |
|
}); |
|
|
|
//上传图片 返回新的图片名 |
|
function uploadStringImgFile(imgBase64Str, imgKey) { |
|
plus.nativeUI.showWaiting(dataInfo.langue.ShowWaiting); |
|
mui.ajax(myAjaxJs.AJAX_UPLOAD_IDENTITY_IMG.getUrl, { |
|
headers: { |
|
"X-Requested-Token": app.getTokenStorage(), // token头部 |
|
"locale": app.getLanguageLocalStorage() // 语种头部 |
|
}, |
|
data: { |
|
img: imgBase64Str |
|
}, |
|
dataType: 'json', //服务器返回json格式数据 |
|
type: myAjaxJs.AJAX_UPLOAD_IDENTITY_IMG.getType, //HTTP请求类型 |
|
timeout: 10000, |
|
success: function(data) { |
|
if(data.code == "200") { |
|
setTimeout(function() { |
|
plus.nativeUI.closeWaiting(); |
|
var src = data.data; |
|
var getUserAuthView = plus.webview.getWebviewById("my_identity.html"); |
|
getUserAuthView.evalJS("saveAuthImg('" + src.replace(/\\/g, "\\\\") + "','" + imgKey + "');"); |
|
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> |