Vue Avatar Cropper is a simple and elegant component for cropping and uploading avatars.
vue image crop upload, vue image cropper, vue 3 avatar cropper, vue advanced cropper example, vue image crop and resize, vue profile picture upload
Features:
- A custom trigger event.
- Moveable.
- Zoomable
- Custom aspect ratio.
- Allows you to set the allowed meme type.
- Event handlers.
How to make use of it:
Install and download:
$ npm i vue-avatar-cropper --save-dev
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. Props are available.
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,
},Props
| Property Name | Type | Description |
|---|---|---|
trigger | Boolean | Set to true to trigger the avatar cropper, this prop is used for v-model. Default: false |
file | File | File to use instead of prompting the user to upload one |
upload-url | String | URL to upload the file to |
upload-file-field | String | FormData field to use for the file. Default: 'file' |
upload-file-name | String/Function | File name to use for the FormData field. Can be String or Function({ filename, mime, extension }) => String. Default: Automatically determined from the uploaded File‘s name property and the extension of the output MIME. |
upload-form-data | FormData | Additional FormData. Default: new FormData() |
upload-handler | Function | Handler to replace default upload handler, the argument is cropperJS instance. |
request-options | Object | Options passed to the init parameter of the Request() constructor. Use this to set the method, headers, etc. Default: { method: 'POST' } |
cropper-options | Object | Options are passed to the cropperJS instance. Default: { |
aspectRatio: 1, | ||
autoCropArea: 1, | ||
viewMode: 1, | ||
movable: false, | ||
zoomable: false | ||
} | ||
output-options | Object | Options passed to the cropper.getCroppedCanvas() method. Default: {}. The recommended use-case is specifying an output size, for instance: { width: 512, height: 512 } |
output-mime | String | The resulting avatar image MIME type, if invalid image/png will be used. Default: null |
output-quality | Number | The resulting avatar image quality [0 – 1]. Default: 0.9(if the output-mime property is 'image/jpeg' or 'image/webp') |
mimes | String | Allowed image formats. Default:'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' |
capture | String | Capture attribute for the file input. Forces mobile users to take a new picture with the back(Use value 'environment') or front(Use value 'user') camera |
labels | Object | Label for buttons. Default: { submit: 'Ok', cancel: 'Cancel' } |
inline | Boolean | If true component will be displayed as an inline element. Default: false |
Vue Avatar Cropper Plugin/Github, avatar cropper mobile, vue avatar editor
See Demo And Download
Official Website(overtrue): Click Here
This superior jQuery/javascript plugin is developed by overtrue. For extra Advanced Usage, please go to the official website.
