Vue Avatar / Profile Pic Cropper Component

When you visit a website did you see the profile picture is cropping and fit to the website window?

How do you think about it works. Here is the solution.

This is simple vue component to crop your avatar pic and make them fit on website. You must have seen when you upload your profile pic on website you get a feature to crop the photo and make it more awesome while showing on your profile.


Vue Avatar / Profile Pic Cropper Component


  • Custom trigger event.
  • Moveable.
  • Zoomable
  • Custom aspect ratio.
  • Allows you to set the allowed meme type.
  • Event handlers.

Basic usage


  1. AvatarCropper will auto-install upon detecting the global Vue instance. You can use
    it right away.


Node environment

  1. Install the AvatarCropper package:

    npm install vue-avatar-cropper
    # or
    yarn add vue-avatar-cropper
  2. Register it as you usually would:
    import AvatarCropper from "vue-avatar-cropper";
    // or
    const AvatarCropper = require('vue-avatar-cropper');
    Vue.component('AvatarCropper', AvatarCropper);
    new Vue({
       components: { AvatarCropper },
       // ... 



Property Name Type Description
trigger String|Element The element to trigger avatar pick
upload-url String Url of upload croppped image
upload-form-name Object Form name of upload request, default: ‘file’
upload-form-data Object Additional form data, default: ‘{}’
upload-handler Function Handler to replace default upload handler, the argument is cropperJS instance.
upload-headers Object Headers of upload request, default: {}
cropper-options Object Options passed to the cropperJS instance,
default: {
    aspectRatio: 1,
    autoCropArea: 1,
    viewMode: 1,
    movable: false,
    zoomable: false
output-options Object Options passed to the cropper.getCroppedCanvas() method,
default: {}. Recommended use-case is specifying an output size, for instance: {width: 512, height: 512}
output-mime String The resulting avatar image mime type, default: null
output-quality Number The resulting avatar image quality [0 – 1], default: 0.9
(if the output-mime property is image/jpeg or image/webp)
mimes String Allowed image formats, default:
image/png, image/gif, image/jpeg, image/bmp, image/x-icon
labels Object Label for buttons, default: { submit: "提交", cancel: "取消"}
withCredentials Boolean The withCredentials property that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates, default: false
inline Boolean If true component will be displayed as inline elemenet, default: false


  • changed user picked a file
  • submit right after a click on the submit button


  • cancel when user decides to cancel the upload

  • uploading before submit upload request, params:

  • uploaded after request is successful, params:
    • response object, json parsed from xhr.responseText
    • form object, FormData instance.
    • xhr object, XMLHttpRequest instance.
  • completed after request has completed, params:
    • response object, json parsed from xhr.responseText
    • form object, FormData instance.
    • xhr object, XMLHttpRequest instance.
  • error something went wrong, params:
    • message error message.
    • type error type, example: upload/user.
    • context context data.

You can listen these events like this:


export default {
    methods: {
        handleUploading(form, xhr) {
            form.append('foo', 'bar')
        handleUploaded(response, form, xhr) {
            // update user avatar attribute
        handleCompleted(response, form, xhr) {
            // xhr.status
        handlerError(message, type, xhr) {
          if (type == 'upload') {
            // xhr.response...

See live demo and download source code.

You may also like...

Leave a Reply

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

Close Free Consuting Form

Free Consultant

100% Privacy. I never share your details.

Close Free Consuting Form

Project Discussion