ūüĎß Simple and Stylish Avatar Cropping and Plugin Download

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.

Related Posts

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Bootstrap-4-Toast-Notification-Plugin

Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Audio-Visualizations-Wave

How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…

swiper-touch-slider

Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

Leave a Reply

Your email address will not be published. Required fields are marked *