Vue Avatar Cropper - Vue Script

Install & Download:

$  npm i vue-avatar-cropper --save-dev

Description:

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.