移动端头像上传Mavatar.js-CSDN博客

Mavatar

移动端头像上传，支撑头像预览和放大缩小平移，内置上传至后端请求方法。GitHub地址

在线预览

二维码预览

使用

安装

npm install mavatar
复制代码

引入

import Mavatar from 'mavatar'
复制代码

创建html的dom标签并定义id名,在dom加载完成的周期里，如 react的(componentDidMount), vue的(mounted)中进行实例化。也可以在纯js中使用，引入mavatar.js即可。

React中使用示例

 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>
<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后的回调方法