Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

作者/代码整理:  (转载请附加本文地址,带有“js原生”字样的谢绝转载) 发布日期:2018-08-19
一款简单实用的HTML5手机移动端头像图片上传裁剪代码,支持拖动放大缩小调整进行图片裁剪。


js代码

<script src="lib/mavatar.js"></script>
<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>