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.
Features:
- Custom trigger event.
- Moveable.
- Zoomable
- Custom aspect ratio.
- Allows you to set the allowed meme type.
- Event handlers.
Basic usage
Installing
Browsers
- Include the link to AvatarCropper in
alongside Vue.js: - 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 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:
responseobject, json parsed fromxhr.responseTextformobject, FormData instance.xhrobject, XMLHttpRequest instance.
- completed after request has completed, params:
responseobject, json parsed fromxhr.responseTextformobject, FormData instance.xhrobject, XMLHttpRequest instance.
- error something went wrong, params:
messageerror message.typeerror type, example:upload/user.contextcontext 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.
|
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.
