移动端上传头像并裁剪功能(h5)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示



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