利用HTML5实现手机图片上传头像裁剪代码



5 19 7



特效描述:利用HTML5实现 手机图片 上传头像 裁剪代码,利用HTML5实现手机图片上传头像裁剪代码

代码结构

1. 引入JS

<script src="lib/mavatar.js"></script>
<script src="lib/mavatar.js"></script>

2. HTML代码

<!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>
<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: 'http://localhost:3080/profile',
        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>
<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 头像上传 图片上传

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到