参考链接
账户页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../css/mui.min.css">
</head>
<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views">
<div class="mui-view">
<div class="mui-pages">
<div id="account" class="mui-page">
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a id="head" class="mui-navigate-right">头像
<span class="mui-pull-right head">
<img class="head-img mui-action-preview" :src="user_head"/>
</span>
</a>
</li>
<li class="mui-table-view-cell" id="promptBtn">
<a>姓名<span
class="mui-pull-right">{{user_name}}</span></a>
</li>
</ul>
<ul class="mui-table-view">
<!--<li class="mui-table-view-cell">-->
<!--<a>QQ号<span class="mui-pull-right">88888888</span></a>-->
<!--</li>-->
<li class="mui-table-view-cell">
<a href="javascript:;">手机号<span
class="mui-pull-right">{{user_tel}}</span></a>
</li>
<!--<li class="mui-table-view-cell">-->
<!--<a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>-->
<!--</li>-->
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="javascript:;" @tap="resetPwd">修改密码<span
class="mui-pull-right"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--页面主结构结束-->
</body>
<script src="../../js/mui.min.js "></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/setting.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/app.min.js"></script>
<script>
mui.init();
mui.plusReady(function () {
// 预加载修改密码
resetPwdView = mui.preload({
url: '../resetPwd.html',
id: 'resetPwdView',
styles: {
"render": "always",
"popGesture": "hide",
"bounce": "vertical",
"bounceBackground": "#efeff4",
"titleNView": getTitleNView('修改密码')
}
});
});
/**
* 统一导航获取方法
* @param title
* @returns {{backgroundColor: string, titleText: *, titleColor: string, type: string, autoBackButton: boolean, splitLine: {color: string}}}
*/
function getTitleNView(title) {
return { //详情页原生导航配置
backgroundColor: '#ffffff', //导航栏背景色
titleText: title, //导航栏标题
titleColor: '#000000', //文字颜色
type: 'default', //透明渐变样式
autoBackButton: true, //自动绘制返回箭头
splitLine: { //底部分割线
color: '#cccccc'
}
};
}
function getDefaultData() {
return {
guid: '',
user_role: '',
user_head: '',
user_name: '',
user_tel: '',
}
}
var vue = new Vue({
el: '#account',
data: getDefaultData(),
methods: {
resetData: function () {//重置数据
Object.assign(this.$data, getDefaultData());
}
}
});
// 监听传来的数据
document.addEventListener('userInfo', function (event) {
var guid = event.detail.guid;
if (!guid) {
return;
}
//前页传入的数据，直接渲染，无需等待ajax请求详情后
vue.guid = event.detail.guid;
vue.user_role = event.detail.user_role;
vue.user_head = event.detail.user_head;
vue.user_name = event.detail.user_name;
vue.user_tel = event.detail.user_tel;
});
//更换头像
mui(".mui-table-view-cell").on("tap", "#head", function (e) {
if (mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改头像",
cancel: "取消",
buttons: a
}, function (b) {
switch (b.index) {
case 0:
break;
case 1:
getImage();
break;
case 2:
galleryImg();
break;
default:
break
}
})
}
});
/**
* 点击拍照
*/
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function (e) {
plus.io.resolveLocalFileSystemURL(e, function (entry) {
var imgUrl = entry.toLocalURL();
// 执行上传操作
cutImage(imgUrl);
}, function (e) {
});
}, function (s) {
}, {
filename: "_doc/head.jpg"
})
}
/**
* 点击打开相册
*/
function galleryImg() {
plus.gallery.pick(function (a) {
plus.io.resolveLocalFileSystemURL(a, function (entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function (root) {
root.getFile("head.jpg", {}, function (file) {
//文件已存在
file.remove(function () {
entry.copyTo(root, 'head.jpg', function (e) {
var imgUrl = entry.toLocalURL();
cutImage(imgUrl);
},
function (e) {
});
}, function () {
});
}, function () {
//文件不存在
entry.copyTo(root, 'head.jpg', function (e) {
var path = e.fullPath + "?version=" + new Date().getTime();
},
function (e) {
});
});
}, function (e) {
})
}, function (e) {
});
}, function (a) {
}, {
filter: "image"
})
};
// 修改密码页面
function resetPwd() {
//触发子窗口变更新闻详情
mui.fire(resetPwdView, 'userInfo', {
user_tel: vue.user_tel,
});
setTimeout(function () {
resetPwdView.show("slide-in-right", 300);
}, 150);
}
//裁剪图片
function cutImage(path) {
console.log('打开裁剪页面');
mui.openWindow({
url: '../cropper.html',
id: 'cropperPage',
extras: {
path: path,
prePage: 'accountView'
},
show: {
aniShow: 'zoom-fade-in',
duration: 800
},
waiting: {
autoShow: true
}
});
}
// 剪切之后 进行图片上传
document.addEventListener('updateHeadImg',function(event){
//获得事件参数
var my_icon = event.detail.img_path;
console.log('拿到的页面数据:' + my_icon);
//根据id向服务器请求新闻详情
if(my_icon != "") {
console.log('开始上传图片');
uploadHead(my_icon);
}
});
//上传头像图片
function uploadHead(base64Data) {
var base64Data = base64Data.split(',')[1];
console.log('转换过的base64数据是:' + base64Data);
/*在这里调用上传接口*/
mui.ajax({
url: HOST + '/api/getQiniuToken',
type: 'get',
async: false,
success: function (data) {
console.log(JSON.stringify(data));
var key = data.uptoken;
var pic = base64Data;
console.log(JSON.stringify('token' + key));
//注意这个url,可以指定key(文件名), mimeType(文件类型)
var url = "http://up.qiniu.com/putb64/-1";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
//这里可以判断图片上传成功,而且可以通过responseText获取图片链接
var data = JSON.parse(xhr.responseText)
console.log('上传后的数据:' + JSON.stringify(data));
var url = uploadBucket + data.key;
console.log('成功后的图片为:' + url);
// 上传成功之后 开始上传我们自己的服务器
mui.ajax({
url:HOST+'/api/updateUserHeaderPic',
type:'post',
headers: {
'Accept': 'application/json',
'Authorization': 'Bearer ' + plus.storage.getItem('access_token')
},
data: {
'user_pic': data.key
},
success:function(data){
if (data.StatusCode===200) {
// 修改本页面的头像
vue.user_head = url;
// 修改下个页面的头像
var settingPage = plus.webview.getWebviewById('settingPage');
var indexPage = plus.webview.getWebviewById('html/agent/agent-home.html');
mui.fire(settingPage, 'changeHeader', {header:url});
mui.fire(indexPage, 'changeHeader', {header:url});
} else {
mui.toast(data.ResultData)
}
},
error:function(a, b , c){
mui.toast('上传图片至服务器失败！')
}
})
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken "+ key);
xhr.send(pic);
}
});
}
</script>
</html>
头像裁剪页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>裁剪头像</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/cropper.min.css" rel="stylesheet" />
<style type="text/css">
body {
background-color: #000000;
}
#cropper-example-1 {
background-color: #000000;
height: 93%;
width: 100%;
position: absolute;
}
#quxiao,
#xuanzhuan,
#xuanqu {
font-size: 20px;
}
.divbut {
width: 100%;
text-align: center;
position: fixed;
z-index: 2;
bottom: 0px;
background-color: #000000;
height: 7.5%;
line-height: 50px;
}
.divbut>div:first-child {
float: left;
width: 20%;
}
.divbut>div:last-child {
float: right;
width: 20%;
}
img#im {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="cropper-example-1" class="mui-hidden">
<img id="im" alt="Picture" />
</div>
<div class="divbut">
<div>
<p id="quxiao" class="iconfont icon-quxiao">取消</p>
</div>
<div>
<p id="xuanqu" class="iconfont icon-queding">确认</p>
</div>
</div>
<img src="" alt="" class="mui-hidden" id="im_exif" />
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/exif.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/app.min.js"></script>
<script>
(function(c) {
var Cro = function() {}
c.extend(Cro.prototype, {
orientation: null,
urldata: null,
view: null,
num: 0,
sbx: null,
sby: null,
n: 0,
onReady: function() {
var that = this;
mui.init();
that.bindEvent();
that.view = plus.webview.currentWebview();
var img = document.getElementById("im_exif");
img.src = that.view.path;
img.addEventListener("load", function() {
//exif调整图片的横竖
EXIF.getData(this, function() {
var orientation = EXIF.getAllTags(this).Orientation;
$("#im").attr("src", that.loadcopyImg(img, orientation));
document.getElementById("cropper-example-1").classList.remove("mui-hidden"); //显示裁剪区域
that.cropperImg();
});
})
},
cropperImg: function() {
var that = this;
$('#cropper-example-1 > img').cropper({
aspectRatio: 1 / 1,
autoCropArea: 1,
strict: true,
background: false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
crop: function(data) {
that.urldata = that.base64(data);
}
});
},
loadcopyImg: function(img, opt) {
var that = this;
var canvas = document.createElement("canvas");
var square = 500;
var imageWidth, imageHeight;
if(img.width > img.height) {
imageHeight = square;
imageWidth = Math.round(square * img.width / img.height);
} else {
imageHeight = square; //this.width;
imageWidth = Math.round(square * img.width / img.height);
}
canvas.height = imageHeight;
canvas.width = imageWidth;
if(opt == 6) {
that.num = 90;
} else if(opt == 3) {
that.num = 180;
} else if(opt == 8) {
that.num = 270;
}
if(that.num == 360) {
that.num = 0;
}
var ctx = canvas.getContext("2d");
ctx.translate(imageWidth / 2, imageHeight / 2);
ctx.rotate(that.num * Math.PI / 180);
ctx.translate(-imageWidth / 2, -imageHeight / 2);
ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
var dataURL = canvas.toDataURL("image/jpeg", 1);
return dataURL;
},
bindEvent: function() {
var that = this;
document.getElementById("quxiao").addEventListener("tap", function() {
mui.back(); //取消就直接返回
});
/**
* 根据页面决定触发那个页面更新
*/
document.getElementById("xuanqu").addEventListener("tap", function() {
var preView = plus.webview.getWebviewById(that.view.prePage);
//触发上一个页面刷新图片事件
console.log('传到的数据:' + that.urldata);
mui.fire(preView,'updateHeadImg',{
img_path:that.urldata
});
mui.back();
});
},
base64: function(data) {
var that = this;
var img = document.getElementById("im");
var canvas = document.createElement("canvas");
//像素
canvas.height = 500;
canvas.width = 500;
var bx = data.x;
var by = data.y;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, bx, by, data.width, data.height, 0, 0, 500, 500);
var dataURL = canvas.toDataURL("image/jpeg", 1.0); //第二个参数是质量
return dataURL;
}
});
var cro = new Cro();
c.plusReady(function() {
cro.onReady();
})
})(mui)
</script>
</body>
</html>
网友评论