Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

Vue Avatar cropper component

Posted on December 3, 2021December 3, 2021 By christo No Comments on Vue Avatar cropper component

This is Vue Avatar cropper component to crop Avatar before going to upload

Follow these steps to use vue Avatar cropper component

Table of Contents

  • Basic usage
  • Installing
    • Browsers
  • Node environment
  • Props
  • Events
    • You can listen for these events like this:

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, Cropper.js and Mime:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.min.css">
<script src="https://cdn.jsdelivr.net/npm/cropperjs"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-avatar-cropper"></script>
<script src="https://wzrd.in/standalone/mime%2flite@latest"></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 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 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: {}. 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 inline elemenet. Default: false
Props

Events

  • triggered trigger prop changed, used for v-model, parameter:
    • value boolean.
  • changed user picked a file, parameter is an object containing:
    • 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, parameter is an object containing:
    • form object, FormData instance.
    • request object, Request instance.
    • response object, Promise which resolves to a Response instance.
  • uploaded after request is successful, parameter is an object containing:
    • form object, FormData instance.
    • request object, Request instance.
    • response object, Response instance.
  • completed after request has completed, parameter is an object containing:
    • form object, FormData instance.
    • request object, Request instance.
    • response object, Response instance.
  • error something went wrong, parameter is an object containing:
    • message error message.
    • type error type, example: 'load'/'upload'/'user'.
    • context context data.

You can listen for these events like this:

<avatar-cropper
  v-model="trigger"
  upload-url="/files/upload"
  @uploading="handleUploading"
  @uploaded="handleUploaded"
  @completed="handleCompleted"
  @error="handleError"
/>
export default {
  //...
  methods: {
    ...
    handleUploading({ form, request, response }) {
      // show a loader
    },

    handleUploaded({ form, request, response }) {
      // update user avatar attribute
    },

    handleCompleted({ form, request, response }) {
      // close the loader
    },

    handleError({ message, type, context}) {
      if (type === 'upload') {
        const { request, response } = context
      }
    }
  },
}
Demo
Full Project
vue.js Tags:Vue Avatar cropper component, vue.js

Post navigation

Previous Post: array_search in PHP
Next Post: vue inner image zoom

Related Posts

Vue JSON to CSV file vue.js
Simple Confirm Dialog verification plugin with Vue.js vue.js
flip countdown timer component using Vue.js vue.js
Vue.js form validation vee-validate library vue.js
Crypto Dashboard using vue.js vue.js
Donut chart using Vue CSS vue.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech