Vue Avatar Cropper

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.

  • @triggered: (value) => {}
  • @changed: (file, reader) => {}
  • @submit: () => {}
  • @cancel: () => {}
  • @uploading: (form, request, response) => {}
  • @uploaded: (form, request, response) => {}
  • @completed: (form, request, response) => {}
  • @error: (message, type, context) => {}

Preview:

Vue Avatar Cropper
Changelog:

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://github.com/overtrue/vue-avatar-cropper

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

You Might Be Interested In:

Add Comment