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
<!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> |