1.1.2 • Published 6 years ago
vue-crop-avatar v1.1.2
vue-crop-avatar
A vue plugin for crop avatar with cropperjs
Getting started
installation
# install dependencies
npm install vue-crop-avatarInclude files:
import VueAvatar from 'vue-crop-avatar'Usage
example
<template>
<vue-crop-avatar
:isRound=true
:cropBoxBorderColor="'#666'"
:defaultImgPath="../../static/logo.png"
@getrawdata="getCanvasData"
></vue-crop-avatar>
</template>
<script>
import VueCropAvatar from 'vue-crop-avatar'
export default{
components:{
VueCropAvatar
}
}
</script>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isRound | Boolean | false | The shape of cropper box |
| cropBoxBorderColor | String | ‘#39F’ | The color of cropper box border |
| cropBoxBorderWidth | Number | 1 | The width of cropper box border |
| outline | Number | 1 | Is show the outline of cropper box border ,only 1 or 0 |
| defaultImgPath | String | null | The path of image when show the component first time |
| defaultBgColor | String | '#39F' | The background color if no defaultImgPath |
| minCropWidth | Number | 100 | The min width of cropper box that allow to adjust |
| minCropHeight | Number | 100 | The min height of cropper box that allow to adjust |
| minFileSize | Number | 10*1024 | The min size of uploaded image |
| maxCropWidth | Number | 500 | The max width of cropper box that allow to adjust |
| maxCropHeight | Number | 500 | The max height of cropper box that allow to adjust |
| maxFileSize | Number | 10*1024*1024 | The max size of uploaded image |
| aspectRatio | Number | 1 | The aspectRatio of cropper box, other value can be 16/9,4/3 |
| outputType | String | 'image/png' | The output type of cropper image |
| beforeOpen | Function | null | A function that will be called before dynamic generate the cropper box |
| beforeClose | Function | null | A function that will be called before the cropper box closed |
Events
| Event | Type | Default | Description |
|---|---|---|---|
| getrawdata | Function | - | An event that emitted when crop the canvas, return value is cropped canvas |
| fileuploaderr | Function | - | An event emitted when file size largger than maxFileSize or smaller than minFileSize, return value is true or false |