overtrue / Vue Avatar Cropper
👧 A simple and elegant avatar cropping and upload plugin.
Stars: ✭ 398
Projects that are alternatives of or similar to Vue Avatar Cropper
react-native-avatar-crop
Highly customisable <Crop /> component for React Native < 💅 >
Stars: ✭ 47 (-88.19%)
Mutual labels: cropper
Vue Advanced Cropper
The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
Stars: ✭ 281 (-29.4%)
Mutual labels: cropper
react-simple-crop
✂️ A React component library for cropping and previewing images
Stars: ✭ 19 (-95.23%)
Mutual labels: cropper
Cropme
Extremely Smooth and Easy Cropping library for you
Stars: ✭ 306 (-23.12%)
Mutual labels: cropper
react-drop-n-crop
An opinionated implementation of react-dropzone and react-cropper
Stars: ✭ 17 (-95.73%)
Mutual labels: cropper
ngx-cropper
An Angular image plugin, includes upload, cropper, save to server.
Stars: ✭ 14 (-96.48%)
Mutual labels: cropper
avatar
Simple online tool for cropping images from an URL, your clipboard, or your disk.
Stars: ✭ 63 (-84.17%)
Mutual labels: cropper
Croppr.js
A vanilla JavaScript image cropper that's lightweight, awesome, and has absolutely zero dependencies.
Stars: ✭ 294 (-26.13%)
Mutual labels: cropper
Vue Avatar Cropper
👧 A simple and elegant avatar cropping and upload plugin.
Installing
$ npm i vue-avatar-cropper
Usage
<template>
<div class="text-center">
<img v-if="userAvatar" :src="userAvatar">
<button id="pick-avatar">Select an image</button>
<avatar-cropper
@uploaded="handleUploaded"
trigger="#pick-avatar"
upload-url="/files/upload" />
</div>
</template>
<script>
import AvatarCropper from "vue-avatar-cropper"
export default {
components: { AvatarCropper },
data() {
return {
userAvatar: undefined,
}
},
methods: {
handleUploaded(resp) {
this.userAvatar = resp.relative_url;
}
}
}
</script>
Properties
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
-
file
object, File object. -
reader
object, FileReader
-
-
submit right after a click on the submit button
-
cancel 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 fromxhr.responseText
-
form
object, FormData instance. -
xhr
object, XMLHttpRequest instance.
-
-
completed after request has completed, params:
-
response
object, json parsed fromxhr.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>
...
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...
}
}
...
}
...
🚀 There is an online demo:
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].