码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-01-18 17:26:09      阅读:533      评论:0      收藏:0      [点我收藏+]

标签:https   box   col   上传   set   float   res   idt   click   

技术分享图片


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

标签:https   box   col   上传   set   float   res   idt   click   

原文地址:https://www.cnblogs.com/520BigBear/p/10288348.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!