README
Vue Avatar Cropper
:girl: A simple and elegant avatar cropping and upload plugin.
Basic usage
<button @click="() => { trigger = true }">Pick avatar</button>
<avatar-cropper
v-model="trigger"
upload-url="/files/upload"
@uploaded="handleUploaded"
/>
Installing
Browsers
Include the link to AvatarCropper in
<head>
alongside Vue.js and Cropper.js:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.css"> <script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue-avatar-cropper"></script>
AvatarCropper will auto-install upon detecting the global Vue instance. You can use it right away.
Node environment
Install the AvatarCropper package:
npm install vue-avatar-cropper # or yarn add vue-avatar-cropper
Register it as you usually would:
import AvatarCropper from "vue-avatar-cropper"; // or const AvatarCropper = require('vue-avatar-cropper'); Vue.component('AvatarCropper', AvatarCropper); //or Vue.use(AvatarCropper); //or new Vue({ components: { AvatarCropper }, // ... });
Props
Property Name | Type | Description |
---|---|---|
trigger |
Boolean | Set to true to trigger the avatar cropper, this prop is used for v-model , default: false |
upload-url |
String | Url of upload croppped image |
upload-form-name |
String | Form name of upload request, default: 'file' |
upload-form-data |
Object | Additional form data, default: '{}' |
upload-handler |
Function | Handler to replace default upload handler, the argument is cropperJS instance. |
upload-headers |
Object | Headers of upload request, default: {} |
cropper-options |
Object | Options 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: {} . Recommended use-case is specifying an output size, for instance: {width: 512, height: 512} |
output-mime |
String | The resulting avatar image mime type, 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, default: null |
labels |
Object | Label for buttons, default: { submit: "提交", cancel: "取消"} |
withCredentials |
Boolean | The withCredentials property that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates, default: false |
inline |
Boolean | If true component will be displayed as inline elemenet, default: false |
Events
triggered
trigger
prop changed, used forv-model
value
boolean.
changed user picked a file
file
object, File object.reader
object, FileReader
submit right after a click on the submit button
cancel when user decides to cancel the upload
uploading before submit upload request, params:
form
object, FormData instance.xhr
object, XMLHttpRequest instance.
uploaded after request is successful, params:
response
object, json parsed fromxhr.responseText
form
object, FormData instance.xhr
object, XMLHttpRequest instance.
completed after request has completed, params:
response
object, json parsed fromxhr.responseText
form
object, FormData instance.xhr
object, XMLHttpRequest instance.
error something went wrong, params:
message
error message.type
error type, example:load
/upload
/user
/.context
context data.
You can listen these events like this:
<avatar-cropper
v-model="trigger"
upload-url="/files/upload"
@uploading="handleUploading"
@uploaded="handleUploaded"
@completed="handleCompleted"
@error="handlerError"
></avatar-cropper>
export default {
//...
methods: {
...
handleUploading(form, xhr) {
form.append('foo', 'bar')
},
handleUploaded(response, form, xhr) {
// update user avatar attribute
},
handleCompleted(response, form, xhr) {
// xhr.status
},
handlerError(message, type, xhr) {
if (type == 'upload') {
// xhr.response...
}
}
},
}
:rocket: There is an online demo:
License
MIT