avatar upload for mobile 移动端头像
移动端头像上传，支撑头像预览和放大缩小平移，内置上传至后端请求方法。
在线预览在线预览地址
二维码预览安装
npm install mavatar
引入
import Mavatar from 'mavatar'
创建html的dom标签并定义id名,在dom加载完成的周期里，如 react的(componentDidMount), vue的(mounted)中进行实例化。也可以在纯js中使用，引入mavatar.js即可。
import Mavatar from 'mavatar' let avatar; export default class App extends Component { componentDidMount() { avatar = new Mavatar({ el: '#avatar', backgroundColor: '#ff6633' }); } handleClip = (e) => { avatar.imageClipper((dataurl) => { console.log(dataurl); }); } handleReset = (e) => { avatar.resetImage(); } render() { return ( <div> <div id="avatar" /> <button onClick={this.handleClip}>裁剪</button> <button onClick={this.handleReset}>重置</button> </div> ); } } Vue中使用示例
在vue中使用可以直接使用该vue组件vue-imageClip
普通js中使用示例下载仓库中src/lib/mavatar.js保存到本地并引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mavatar</title> <script src="lib/mavatar.js"></script> </head> <body> <!-- dom --> <div class="avatarbox" > <div id="avatar"></div> <button onclick="clip()">裁剪</button> <button onclick="reset()">重置</button> </div> <!-- script --> <script> var avatar = new Mavatar({el: '#avatar',backgroundColor: '#fff'}); 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(); } </script> </body> </html> 方法
裁剪: 图片裁剪方法，回调中可以获取裁剪完成base64
avatar.imageClipper(function(dataurl) { console.log(dataurl); });
重置: 重置头像上传方法, 可以清空已上传的图片
avatar.resetImage()
获取头像上传前的信息(大小，尺寸等)。
const flieInfo = avatar.getfileInfo()
获取头像完成裁剪生成的base64(注意！使用时确保图片已完成裁剪，图片裁剪为异步方法)。
const dataUrl = avatar.getDataUrl()
图片上传至服务器的内置ajax方法(使用multipart/form-data类型模拟form格式进行上传)
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) } });
| 参数 | 类型 | 描述 |
|---|---|---|
| url | string | 必传，上传的请求地址 |
| name | string | 必传，图片上传的请求name |
| data | object | 发送到服务器的其他数据，选填 |
| success | function | 上传成功的回调，选填 |
| error | function | 上传失败的回调，选填 |
实例化时传入的配置参数option对象
avatar = new Mavatar(option)
| 参数 | 值 | 描述 |
|---|---|---|
| el | id(string)，无默认值 | 必传，dom的id |
| width | (string)默认200px | 不传则默认为生成200px宽的头像上传域 |
| height | (string)默认200px | 不传则默认为生成200px高的头像上传域 |
| backgroundColor | (string)默认为空 | 不传则裁剪时空的区域为透明 |
| hd | (boolean)默认为true | 默认为生成两倍大小图片，解决高清屏中图片生成不清晰 |
| fileOnchange | (function) | 图片本地上传到input后的回调方法 |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
