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

移动端 上传头像 并裁剪功能(h5)的更多相关文章

  1. PC端-上传头像并裁剪

    界面一: <link href="../theme/js/layui.layim/src/css/layui.css" rel="stylesheet"/ ...

  2. html5 上传头像的裁剪

    本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全: 下图为裁剪后的效果: html部分: <!DOCTYPE html& ...

  3. asp.net mvc上传头像加剪裁功能

    原文:asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jqu ...

  4. mvc上传头像加剪裁功能

    asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery ...

  5. asp.net mvc上传头像加剪裁功能介绍

    正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc ...

  6. WebAPI实现移动端上传头像接口

    测试时可以直接使用PostMan模拟发送请求 /// <summary> /// 手机端上传头像接口 /// </summary> /// <param name=&qu ...

  7. Jcrop+uploadify+php实现上传头像预览裁剪

    最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...

  8. 完美实现类似QQ的自拍头像、上传头像功能！（Demo 源码）

    现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...

  9. ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

    我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...

随机推荐

  1. bash 特殊变量

    脚本参数 $* $@ $N shift 执行一个脚本时可以传递参数, 事实上每个参数都有对应的变量$0~$9 ./start.sh  a   b   c $0           $1 $2 $3 当 ...

  2. Codeforces 1060E(dfs计数)

    题目链接 题意 给一棵树,对于一个节点,与它相邻的结点可以连一条边,求所有点对间距离之和 思路 任意两点间的距离被优化为$\left \lceil \frac{s}{2} \right \rceil$ ...

  3. Educational Codeforces Round 55 (Rated for Div. 2)

    D. Maximum Diameter Graph 题意 给出每个点的最大度,构造直径尽可能长的树 思路 让度数大于$1$的点构成链,考虑是否能在链的两端加度为$1$的点 代码 #include &l ...

  4. 51nod 1423 最大二“货” 单调栈

    利用单调栈,高效求出每个区间内的最大值和次大值的亦或值. 先正向扫描,利用单调递减栈,若当前栈为空栈,则直接压入栈中,若为非空栈,弹出栈顶元素,每弹出一个元素,则求一次亦或值,保留最大值 接着进行反向 ...

  5. 微信小程序scroll-view(或者其他view) 计算高度 px转rpx有关

    wx.getSystemInfo({ success: function (res) { that.globalData.winWidth = res.windowWidth; that.global ...

  6. 转：对UI自动化测试的一些感悟

    不断发掘自动化测试对各个团队的附加价值,这样才能得到来自四面八方的支持,没有将自动化加入项目过程的自动化都达不到预期的效果. UI自动化框架 把UI自动化框架设计成一个拼图性质的架构.把每个特性都设计 ...

  7. java类型转换小技巧

    mysql 之排序显示行号 select @r := @r+1 as rownum,birth,cardNo from card,(select @r:=0)torder by birth ASC

  8. switch case 遇到判断type分支的写法

    一叶障目,没有接触到的知识点真是太多了...... 最近项目里需要用到一个小工具,就用winform写了一个出来,然后需要一个功能就是清空控件内容,我这个工具就用到了textbox和combobox, ...

  9. redis数据备份与恢复

    1.启动redis 进入redis目录 redis-cli 2.数据备份 redis 127.0.0.1:6379> SAVE 该命令将在 redis 备份目录中创建dump.rdb文件. 3. ...

  10. Java Web项目漏洞：检测到目标URL存在http host头攻击漏洞解决办法

    检测到目标URL存在http host头攻击漏洞 详细描述 为了方便的获得网站域名,开发人员一般依赖于HTTP Host header.例如,在php里用_SERVER["HTTP_HOST ...