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

Features:

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

Basic usage

<avatar-cropper
    @uploaded="handleUploaded"
    trigger="#pick-avatar"
    upload-url="/files/upload" 
/>


  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);
    
    //or
    Vue.use(AvatarCropper);
    
    //or
    new Vue({
       components: { AvatarCropper },
       // ... 
    });
    

     

Props

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

Events

  • 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:

 

<avatar-cropper
    trigger="#set-avatar"
    upload-url="/files/upload"
    @uploading="handleUploading"
    @uploaded="handleUploaded"
    @completed="handleCompleted"
    @error="handlerError"
></avatar-cropper>
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.
 | 
Share

You may also like...

1 Response

  1. Hi, this is a comment.
    To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
    Commenter avatars come from Gravatar.

Leave a Reply

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