Vue Avatar / Profile Pic Cropper Component

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.


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

Basic usage




  1. Include the link to AvatarCropper in <head> alongside Vue.js:
    <script src=""></script>
    <script src=""></script>
  2. 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";
    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) {

        handleCompleted(response, form, xhr) {

        handlerError(message, type, xhr) {
          if (type == 'upload') {


See live demo and download source code.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by overtrue. Visit their official repository for more information and follow for future updates.