@ferretwithaberet/vue-avatar-cropperdeprecated

A simple and elegant avatar cropping and upload plugin

Usage no npm install needed!

<script type="module">
  import ferretwithaberetVueAvatarCropper from 'https://cdn.skypack.dev/@ferretwithaberet/vue-avatar-cropper';
</script>

README

Vue Avatar Cropper

:girl: A simple and elegant avatar cropping and upload plugin.

image

Edit test-project

Basic usage

<button @click="() => { trigger = true }">Pick avatar</button>

<avatar-cropper
    v-model="trigger"
    upload-url="/files/upload"
    @uploaded="handleUploaded"
/>

Installing

Browsers

  1. Include the link to AvatarCropper in <head> alongside Vue.js and Cropper.js:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.css">
    <script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.12/dist/cropper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-avatar-cropper"></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";
    
    // 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 Boolean Set to true to trigger the avatar cropper, this prop is used for v-model, default: false
upload-url String Url of upload croppped image
upload-form-name String 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
capture String Capture 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, default: null
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

  • triggered trigger prop changed, used for v-model

    • value boolean.
  • 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: load/upload/user/.
    • context context data.

You can listen these events like this:

<avatar-cropper
    v-model="trigger"
    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...
          }
        }
    },
}

:rocket: There is an online demo:

Edit test-project

License

MIT