.png)
3 years ago
137 BOOK THIS SPACE FOR AD
ARTICLE ADThis 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
<avatar-cropper @uploaded="handleUploaded" trigger="#pick-avatar" upload-url="/files/upload" />Installing
Browsers
Include the link to AvatarCropper in <head> alongside Vue.js: <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue-avatar-cropper"></script> AvatarCropper will auto-install upon detecting the global Vue instance. You can useit 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
| 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 file object, File object. reader object, FileReader submit right after a click on the submit buttoncancel when user decides to cancel the upload
uploading before submit upload request, params:
form object, FormData instance. xhr object, XMLHttpRequest instance. 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.
|
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.
Bengali (Bangladesh) · 
English (United States) ·