<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>移动端头像图片上传裁剪
</title>
<script src="js/mavatar.js"></script>
<style>
.button {
outline: 0;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
line-height: 1.5;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 6px 15px;
font-size: 12px;
border-radius: 4px;
transition: color .2s linear,background-color .2s linear,border .2s linear,box-shadow .2s linear;
color: #495060;
background-color: #f7f7f7;
border-color: #dddee1;
}
.button-info {
color: #fff;
background-color: #2db7f5;
border-color: #2db7f5;
}
.avatarbox {width: 200px; margin: 0 auto}
#avatar{width: 200px;}
.botton-box{width: 140px; margin: 0 auto; margin-top: 20px}
</style>
</head>
<body style="background-color:#fafafa">
<div class="avatarbox" >
<div id="avatar"></div>
<div class="botton-box">
<button onClick="clip()" class="button button-info" style="float: left">裁剪
</button>
<button onClick="reset()" class="button" style="float: right">重置
</button>
</div>
</div>
<script>
var avatar = new Mavatar({el: '#avatar',backgroundColor: '#fff', fileOnchange: function (e) {
console.log(e)
}});
function clip() {
avatar.imageClipper(function (data) {
alert('裁剪成功，生成的图片已覆盖在上传框内');
console.log(data);
// 将图片上传至后台
avatar.upload({
url: 'https://www.baidu.com/',
name: 'avatar',
data: {userName: 'hzy0913', info: 'someInfo'},
success: function (data) {
console.log(data)
},
error: function (error) {
console.log(error)
},
});
})
}
function reset() {
avatar.resetImage();
}
//获取上传前信息
function getInfo() {
var fileInfo = avatar.getfileInfo();
console.log(fileInfo);
}
//获取base64
function getdata() {
var urldata = avatar.getDataUrl();
console.log(urldata);
}
</script>
</body>
</html>
js 地址 https://github.com/Clearlovesky/uploadTouXiang/tree/master/js
转载于:https://www.cnblogs.com/520BigBear/p/10288348.html
相关资源：HTML5移动端头像剪裁上传
