Eddie-Fannie / Avatar-canvas-crop

一个基于canvas的头像剪裁组件

ef-avatarcrop

a component to crop avatar

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

一些属性

props	用途	类型	默认
avatarUrl	传入的图片初始化路径	String	必须项
width	图片宽	String	100px
height	图片高	String	100px
borderRadius	图片边框圆角弧度	String	50%
acceptType	图片接受上传类型	String	image/*
duration	图片剪裁缩放器分割片段数	Number	100
stepratio	图片剪裁器缩放条初始值	Number	50（需小于duration属性值）
stepOnce	剪裁器每缩放一次的进度	Number	5
uploadApi	上传图片的接口	String	必须的

一些方法

methods	用途
uploadSucess	得到上传成功后返回的数据resData

组件使用

npm install ef-avatarcrop -S

然后在项目的根目录下main.js文件引入

import AvatarCrop from 'ef-avatarcrop'

然后使用

Vue.use(AvatarCrop)