移动端上传头像并裁剪功能(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>

js 地址 https://github.com/Clearlovesky/uploadTouXiang/tree/master/js

相关阅读:
自定义GridView分页控件
 ASP.NET中JSON的序列化和反序列化 C#的JSON数据格式转换方法
 C# 中 Struct 与 Class 的区别，以及两者的适用场合
 IEnumerable
谈谈C#中的三个关键词new , virtual , override
常见通信协议
 当base-package="controller.*"时，可见packageSearchPath为"classpath*:controller/*/**/*.class"：当base-package="controller.**"时，可见packageSearchPath为"classpath*:controller/**/**/*.class"：
DO,DTO和VO的使用
 mysql 字符
 mysql sql 分析
原文地址：https://www.cnblogs.com/520BigBear/p/10288348.html

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

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