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.
287 lines
8.1 KiB
287 lines
8.1 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>Cropper.js</title>
|
||
|
|
<link rel="stylesheet" href="../../../lib/css/mui.css">
|
||
|
|
<link href="../../../lib/css/basic.css" rel="stylesheet" />
|
||
|
|
<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 src="../../../lib/js/require2.1.11.js"></script>
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
body,
|
||
|
|
html {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
position: absolute;
|
||
|
|
left: 0 !important;
|
||
|
|
right: 0 !important;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#img-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#img-content #image {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cropper-view-box,
|
||
|
|
.cropper-face {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
</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 " ></a>
|
||
|
|
<a id="button" class="mui-pull-right" style="position: absolute; right: 12px;bottom: .28rem; color:#333333;" data-text="CropImageUse">{{langue.use}}</a>
|
||
|
|
</header>
|
||
|
|
<div id="container">
|
||
|
|
<div id="img-content">
|
||
|
|
<img id="image" alt="Picture">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
// 国际化
|
||
|
|
var langues = {
|
||
|
|
zh_CN: {
|
||
|
|
use: "使用",
|
||
|
|
ShowWaiting: "等待中...",
|
||
|
|
uploadError: "上传失败，请刷新后重试！",
|
||
|
|
AlterSuccessMsg: "修改成功！"
|
||
|
|
},
|
||
|
|
zh_HK: {
|
||
|
|
use: "使用",
|
||
|
|
ShowWaiting: "等待中...",
|
||
|
|
uploadError: "上傳失敗，請刷新後重試！",
|
||
|
|
AlterSuccessMsg: "修改成功！"
|
||
|
|
},
|
||
|
|
en_US: {
|
||
|
|
use: "use",
|
||
|
|
ShowWaiting: "Waiting...",
|
||
|
|
uploadError: "Upload failed, please refresh and try again!",
|
||
|
|
AlterSuccessMsg: "Modified successfully!"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
var cropper = new Cropper(image, {
|
||
|
|
dragMode: 'move',
|
||
|
|
aspectRatio: 1,
|
||
|
|
viewMode: 1,
|
||
|
|
autoCropArea: 0.65,
|
||
|
|
restore: false,
|
||
|
|
guides: false,
|
||
|
|
center: false,
|
||
|
|
highlight: false,
|
||
|
|
cropBoxMovable: false,
|
||
|
|
cropBoxResizable: false,
|
||
|
|
toggleDragModeOnDblclick: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
button.onclick = function() {
|
||
|
|
var croppedCanvas;
|
||
|
|
var roundedCanvas;
|
||
|
|
|
||
|
|
if(!cropper) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// Crop
|
||
|
|
croppedCanvas = cropper.getCroppedCanvas();
|
||
|
|
// Round
|
||
|
|
roundedCanvas = getRoundedCanvas(croppedCanvas);
|
||
|
|
// base64图片
|
||
|
|
var imgBase64 = roundedCanvas.toDataURL("image/jpeg", 0.2);
|
||
|
|
// 截取base64字符串
|
||
|
|
var imgBase64Str = imgBase64.replace("data:image/jpeg;base64,", "");
|
||
|
|
plus.nativeUI.showWaiting(dataInfo.langue.ShowWaiting);
|
||
|
|
// 上传base64图片
|
||
|
|
uploadHeadImgFile(imgBase64Str);
|
||
|
|
};
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
function base64ToBlob(urlData) {
|
||
|
|
var arr = urlData.split(',');
|
||
|
|
var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';
|
||
|
|
// 去掉url的头，并转化为byte
|
||
|
|
var bytes = window.atob(arr[1]);
|
||
|
|
// 处理异常,将ascii码小于0的转换为大于0
|
||
|
|
var ab = new ArrayBuffer(bytes.length);
|
||
|
|
// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
|
||
|
|
var ia = new Uint8Array(ab);
|
||
|
|
for(var i = 0; i < bytes.length; i++) {
|
||
|
|
ia[i] = bytes.charCodeAt(i);
|
||
|
|
}
|
||
|
|
return new Blob([ab], {
|
||
|
|
type: mime
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//上传图片 返回新的图片名
|
||
|
|
function uploadHeadImgFile(imgBase64Str) {
|
||
|
|
mui.ajax(myAjaxJs.AJAX_UPLOAD_HEAD_IMG.getUrl, {
|
||
|
|
headers: {
|
||
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
img: imgBase64Str
|
||
|
|
},
|
||
|
|
dataType: 'json', //服务器返回json格式数据
|
||
|
|
type: myAjaxJs.AJAX_UPLOAD_HEAD_IMG.getType, //HTTP请求类型
|
||
|
|
timeout: 10000,
|
||
|
|
success: function(data) {
|
||
|
|
if(data.code == "200") {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
if(data.data != null || data.data != "") {
|
||
|
|
// 更新缓存
|
||
|
|
var userData = app.getUserLocalStorage();
|
||
|
|
userData.avatar = data.data;
|
||
|
|
app.setUserLocalStorage(userData);
|
||
|
|
//上传头像到数据库
|
||
|
|
updateAvatar(data.data);
|
||
|
|
} else {
|
||
|
|
// mui.alert(langue.uploadError, langue.AlertMsg);
|
||
|
|
mui.toast(dataInfo.langue.uploadError);
|
||
|
|
}
|
||
|
|
} else if(data.code == "201" || data.code == "202") { //未登录
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
mui.openWindow({
|
||
|
|
id: "mine/html/wallet_login.html",
|
||
|
|
url: "../wallet_login.html"
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
mui.toast(data.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
// mui.alert(langue.AjaxError2, langue.AlertMsg)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateAvatar(avatar) {
|
||
|
|
mui.ajax(myAjaxJs.AJAX_UPDATE_AVATAR.getUrl, {
|
||
|
|
headers: {
|
||
|
|
"X-Requested-Token": app.getTokenStorage(), // token头部
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
},
|
||
|
|
type: myAjaxJs.AJAX_UPDATE_AVATAR.getType, //HTTP请求类型
|
||
|
|
data: {
|
||
|
|
img: avatar
|
||
|
|
},
|
||
|
|
dataType: 'json', //服务器返回json格式数据
|
||
|
|
timeout: 10000, //超时时间设置为10秒；
|
||
|
|
success: function(data) {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
if("200" == data.code) {
|
||
|
|
synchrodataFun();
|
||
|
|
mui.back();
|
||
|
|
mui.toast(dataInfo.langue.AlterSuccessMsg);
|
||
|
|
} else if(data.code == "201" || data.code == "202") { //未登录
|
||
|
|
mui.openWindow({
|
||
|
|
id: "mine/html/wallet_login.html",
|
||
|
|
url: "../wallet_login.html"
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
mui.back();
|
||
|
|
app.toast(data.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(xhr, type, errorThrown) {
|
||
|
|
mui.back();
|
||
|
|
// app.toast(langue.AjaxError);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 数据同步
|
||
|
|
*/
|
||
|
|
function synchrodataFun() {
|
||
|
|
//获取首页窗口，账户信息页窗口
|
||
|
|
var walletMyView = plus.webview.getWebviewById("mine/html/wallet_my.html");
|
||
|
|
var walletUserInfoListView = plus.webview.getWebviewById("mine/html/user/user_info_list.html");
|
||
|
|
walletMyView.evalJS("saveUserInfoData();");
|
||
|
|
walletUserInfoListView.evalJS("saveUserInfoData();");
|
||
|
|
}
|
||
|
|
|
||
|
|
// 国际化统一方法
|
||
|
|
window.addEventListener('switchLangueData', function(e) {
|
||
|
|
dataInfo.langue = langues[e.detail];
|
||
|
|
});
|
||
|
|
// let dataBase = {};
|
||
|
|
// appLanguageFun();
|
||
|
|
// /**
|
||
|
|
// * 国际化方法
|
||
|
|
// */
|
||
|
|
// function appLanguageFun() {
|
||
|
|
// let type = app.getLanguageLocalStorage();
|
||
|
|
// let dataTextArray = document.querySelectorAll("[data-text]");
|
||
|
|
// require(['../../js/language/' + type], function(data) {
|
||
|
|
// dataTextArray.forEach(dom => {
|
||
|
|
// let value = dom.getAttribute("data-text");
|
||
|
|
// dom.innerText = data[value];
|
||
|
|
// })
|
||
|
|
// dataBase = data;
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
</script>
|