👧 Simple and Stylish Avatar Cropping and Plugin Download

vue-avatar-image-crop-upload

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 NameTypeDescription
triggerBooleanSet to true to trigger the avatar cropper, this prop is used for v-model. Default: false
fileFileFile to use instead of prompting the user to upload one
upload-urlStringURL to upload the file to
upload-file-fieldStringFormData field to use for the file. Default: 'file'
upload-file-nameString/FunctionFile 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-dataFormDataAdditional FormData. Default: new FormData()
upload-handlerFunctionHandler to replace default upload handler, the argument is cropperJS instance.
request-optionsObjectOptions passed to the init parameter of the Request() constructor. Use this to set the method, headers, etc. Default: { method: 'POST' }
cropper-optionsObjectOptions are passed to the cropperJS instance.
Default: {
      aspectRatio: 1,
      autoCropArea: 1,
      viewMode: 1,
      movable: false,
      zoomable: false
  }
output-optionsObjectOptions passed to the cropper.getCroppedCanvas() method.
Default: {}. The recommended use-case is specifying an output size, for instance: { width: 512, height: 512 }
output-mimeStringThe resulting avatar image MIME type, if invalid image/png will be used. Default: null
output-qualityNumberThe resulting avatar image quality [0 – 1]. Default: 0.9
(if the output-mime property is 'image/jpeg' or 'image/webp')
mimesStringAllowed image formats. Default:
'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
captureStringCapture 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
labelsObjectLabel for buttons. Default: { submit: 'Ok', cancel: 'Cancel' }
inlineBooleanIf 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.

Share