Vue Avatar cropper component

by

In the era of personalized user experiences, avatars play a crucial role in creating a sense of identity. Integrating an avatar cropper component into your Vue.js application empowers users to customize and crop their profile pictures seamlessly. In this detailed guide, we will walk through the process of building a Vue Avatar Cropper component, utilizing Vue.js and a popular image cropping library.

Introduction to Vue.js

Vue.js is a JavaScript framework renowned for its simplicity and versatility in building dynamic user interfaces. Leveraging Vue.js for our Avatar Cropper component ensures an efficient and reactive development process.

Setting Up the Project

Begin by initializing a new Vue.js project using the Vue CLI:

vue create vue-avatar-cropper

Navigate to the project directory:

cd vue-avatar-cropper

Install the necessary dependencies, including Vue Cropperjs, a Vue wrapper for the Cropper.js library:

npm install vue-cropperjs cropper --save

Designing the Avatar Cropper Component

Create a modular structure for the Avatar Cropper component, breaking it down into reusable sub-components. The main component will manage the overall cropper, while sub-components handle specific functionalities.

<!-- AvatarCropper.vue -->
<template>
  <div class="avatar-cropper">
    <Cropper
      ref="cropper"
      :options="cropperOptions"
      :img="imageSrc"
    />
    <button @click="cropImage">Crop Image</button>
  </div>
</template>

<script>
import Cropper from 'vue-cropperjs';

export default {
  components: {
    Cropper,
  },
  data() {
    return {
      imageSrc: '', // Set image source dynamically
      cropperOptions: {
        aspectRatio: 1, // Maintain a square aspect ratio for avatars
        viewMode: 2, // Display the entire image within the cropper
        dragMode: 'move', // Enable image dragging
      },
    };
  },
  methods: {
    cropImage() {
      const cropper = this.$refs.cropper;
      const croppedData = cropper.getCroppedCanvas().toDataURL();
      // Handle the cropped image data as needed (e.g., upload to server)
    },
  },
};
</script>

<style scoped>
/* Component-specific styles here */
</style>

Styling the Avatar Cropper Component

Enhance the visual appeal of the Avatar Cropper component with CSS styles. Customize the styles to match the design of your application.

/* AvatarCropper.vue */
.avatar-cropper {
  max-width: 400px;
  margin: auto;
  text-align: center;
}

/* Additional styling as needed */

Incorporating the Avatar Cropper into Your App

Integrate the Avatar Cropper component into your application by importing it and placing it where user avatars need to be customized.

<!-- App.vue -->
<template>
  <div id="app">
    <AvatarCropper />
    <!-- Other components and content -->
  </div>
</template>

<script>
import AvatarCropper from './components/AvatarCropper.vue';

export default {
  components: {
    AvatarCropper,
  },
};
</script>

<style>
/* Global styles here */
</style>

.

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

Follow these steps to use vue Avatar cropper component

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

  • triggeredtrigger prop changed, used for v-model, parameter:
    • value boolean.
  • changed user picked a file, parameter is an object containing:
  • 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:
  • uploaded after request is successful, parameter is an object containing:
  • completed after request has completed, parameter is an object containing:
  • 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

Leave a Comment

© Codingtube ~ 2024
Privacy