[TOC]

vue-crop-avatar

A vue plugin for crop avatar with 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	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