[TOC]

vue-crop-avatar

A vue plugin for crop avatar with [cropperjs] (https://github.com/fengyuanchen/cropperjs)

Getting started

installation

# install dependencies
npm install vue-crop-avatar

Include 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 | 101024 | 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*10241024 | 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 |