An easy and elegant image cropper for avatar upload.
Features:
- Custom trigger event.
- Moveable.
- Zoomable
- Custom aspect ratio.
- Allows you to set the allowed meme type.
- Event handlers.
How to use it:
1. Import and register the AvatarCropper component.
// Import
import AvatarCropper from 'vue-avatar-cropper';
// Register
Vue.component('AvatarCropper', AvatarCropper);
// or
Vue.use(AvatarCropper);
// or
new Vue({
components: { AvatarCropper },
// ...
});
2. Add the <avatar /> component to the template.
<template>
<div>
<form method="post">
<avatar />
</form>
</div>
</template>
3. Available props.
trigger: {
type: Boolean,
default: false,
},
file: {
type: File,
},
uploadHandler: {
type: Function,
},
uploadUrl: {
type: String,
},
requestOptions: {
type: Object,
default() {
return {
method: 'POST',
}
},
},
uploadFileField: {
type: String,
default: 'file',
},
uploadFormData: {
type: FormData,
default() {
return new FormData()
},
},
cropperOptions: {
type: Object,
default() {
return {
aspectRatio: 1,
autoCropArea: 1,
viewMode: 1,
movable: false,
zoomable: false,
}
},
},
outputOptions: {
type: Object,
},
outputMime: {
type: String,
default: null,
},
outputQuality: {
type: Number,
default: 0.9,
},
mimes: {
type: String,
default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',
},
capture: {
type: String,
},
labels: {
type: Object,
default() {
return {
submit: 'Ok',
cancel: 'Cancel',
}
},
},
inline: {
type: Boolean,
default: false,
},
4. Events.
- @triggered: (value) => {}
- @changed: (file, reader) => {}
- @submit: () => {}
- @cancel: () => {}
- @uploading: (form, request, response) => {}
- @uploaded: (form, request, response) => {}
- @completed: (form, request, response) => {}
- @error: (message, type, context) => {}
Preview:
Changelog:
02/03/2022
- v6.0.9: update
01/17/2022
- v6.0.0: update for Vue 3
11/06/2021
- v5.0.2: update
10/11/2021
- v5.0.1: Fix keep mime logic
09/11/2021
- v4.0.4: Fix: Use correct file field name option
08/03/2021
- v4.0.3: Fix: Use correct file field name option
08/01/2021
- v4.0.2: Replaced XMLHttpRequest with fetch API and other improvements
07/23/2021
- v3.0.6
07/17/2021
- v2.0.1
04/21/2021
- v2.0.0
09/22/2020
- v1.0.9
09/05/2020
- v1.0.7
Download Details:
Author: overtrue
Live Demo: https://codesandbox.io/s/github/overtrue/vue-avatar-cropper-demo/tree/master/
Download Link: https://github.com/overtrue/vue-avatar-cropper/archive/master.zip
Official Website: https://github.com/overtrue/vue-avatar-cropper
Install & Download:
$ npm i vue-avatar-cropper --save-dev