Installations
npm install vue-avatar-cropperDeveloper Guide
Typescript
No
Module System
CommonJS, ESM, UMD
Min. Node Version
>=10
Node Version
21.6.2
NPM Version
10.2.4
Score
53.9
Supply Chain
98.8
Quality
78
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (59.27%)
Vue (33.61%)
HTML (7.13%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
overtrue
Download Statistics
Total Downloads
801,654
Last Day
546
Last Week
2,259
Last Month
10,487
Last Year
128,209
GitHub Statistics
513 Stars
885 Commits
94 Forks
9 Watchers
13 Branches
15 Contributors
Updated on Feb 05, 2025
Maintainers
Package Meta Information
Latest Version
6.1.1
Package Id
vue-avatar-cropper@6.1.1
Unpacked Size
43.26 kB
Size
9.42 kB
File Count
6
NPM Version
10.2.4
Node Version
21.6.2
Published on
Mar 12, 2024
Total Downloads
Cumulative downloads
Total Downloads
801,654
Last Day
36.5%
546
Compared to previous day
Last Week
-5.4%
2,259
Compared to previous week
Last Month
37.7%
10,487
Compared to previous month
Last Year
-25.1%
128,209
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
21
Vue Avatar Cropper
:girl: A simple and elegant component to crop and upload avatars.
Basic usage
1<button @click="showCropper = true">Select an image</button> 2 3<avatar-cropper 4 v-model="showCropper" 5 upload-url="/files/upload" 6 @uploaded="handleUploaded" 7/> 8 9<script> 10 export default { 11 data() { 12 return { 13 showCropper: false, 14 } 15 }, 16 methods: { 17 handleUploaded({ form, request, response }) { 18 // update user avatar attribute 19 }, 20 }, 21 } 22</script>
Need more editing features?
Pintura the modern JavaScript Image Editor is what you're looking for.
Pintura supports setting crop aspect ratios, resizing, rotating, cropping, flipping images, and more.
Installing
Browsers
-
Include the link to AvatarCropper in
<head>alongside Vue.js, Cropper.js and Mime:1<link 2 rel="stylesheet" 3 href="https://unpkg.com/cropperjs@1.5.12/dist/cropper.min.css" 4/> 5<script src="https://unpkg.com/cropperjs@1.5.12/dist/cropper.js"></script> 6<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 7<script src="https://unpkg.com/vue-avatar-cropper/dist/avatar-cropper.umd.js"></script> 8<script src="https://wzrd.in/standalone/mime%2flite@latest"></script> -
Add a trigger button and
<avatar-cropper>to mount the component:
1<button @click="showCropper = true">Select an image</button> 2 3<avatar-cropper 4 v-model="showCropper" 5 upload-url="/files/upload" 6 @uploaded="handleUploaded" 7/>
- Create Vue instance and register
AvatarCroppercomponent:
1<script> 2 Vue.createApp({ 3 el: '#app', 4 5 data() { 6 return { 7 showCropper: false, 8 } 9 }, 10 11 methods: { 12 handleUploaded(event) { 13 console.log('avatar uploaded', event) 14 }, 15 }, 16 }) 17 .use(AvatarCropper) 18 .mount('#app') 19</script>
Node environment
-
Install the AvatarCropper package:
1npm install vue-avatar-cropper 2 3# or 4yarn add vue-avatar-cropper -
Register it as you usually would:
1import AvatarCropper from 'vue-avatar-cropper' 2 3// or 4const AvatarCropper = require('vue-avatar-cropper') 5 6Vue.component('AvatarCropper', AvatarCropper) 7 8// or 9Vue.use(AvatarCropper) 10 11// or 12new Vue({ 13 components: { AvatarCropper }, 14 // ... 15})
Props
| Property Name | Type | Description |
|---|---|---|
modelValue | Boolean | Set to true to show the avatar cropper, this prop is used for v-model. Default: false |
file | File | File to use instead of prompting the user to upload one |
upload-url | String | URL to upload the file to |
upload-file-field | String | FormData field to use for the file. Default: 'file' |
upload-file-name | String/Function | File name to use for the FormData field. Can be String or Function({ filename, mime, extension }) => String. Default: Automatically determined from the uploaded File's name property and the extension of the output MIME. |
upload-form-data | FormData | Additional FormData. Default: new FormData() |
upload-handler | Function | Handler to replace default upload handler, the argument is cropperJS instance. |
request-options | Object | Options passed to the init parameter of the Request() constructor. Use this to set the method, headers, etc. Default: { method: 'POST' } |
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, if invalid image/png will be used. 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 |
labels | Object | Label for buttons. Default: { submit: 'Ok', cancel: 'Cancel' } |
inline | Boolean | If true component will be displayed as inline elemenet. Default: false |
Events
-
update:modelValue
modelValueprop changed, used forv-model, parameter:valueboolean.
-
changed user picked a file, parameter is an object containing:
fileobject, File object.readerobject, FileReader
-
submit right after a click on the submit button
-
cancel when user decides to cancel the upload
-
uploading before submit upload request, parameter is an object containing:
-
uploaded after request is successful, parameter is an object containing:
-
completed after request has completed, parameter is an object containing:
-
error something went wrong, parameter is an object containing:
messageerror message.typeerror type, example:'load'/'upload'/'user'.contextcontext data.
You can listen for these events like this:
1<avatar-cropper 2 v-model="showCropper" 3 upload-url="/files/upload" 4 @uploading="handleUploading" 5 @uploaded="handleUploaded" 6 @completed="handleCompleted" 7 @error="handleError" 8/>
1export default { 2 //... 3 methods: { 4 ... 5 handleUploading({ form, request, response }) { 6 // show a loader 7 }, 8 9 handleUploaded({ form, request, response }) { 10 // update user avatar attribute 11 }, 12 13 handleCompleted({ form, request, response }) { 14 // close the loader 15 }, 16 17 handleError({ message, type, context}) { 18 if (type === 'upload') { 19 const { request, response } = context 20 } 21 } 22 }, 23}
:rocket: There is an online demo:
:heart: Sponsor me
如果你喜欢我的项目并想支持它，点击这里 :heart:
Project supported by JetBrains
Many thanks to Jetbrains for kindly providing a license for me to work on this and other open-source projects.
License
MIT
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
6 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Reason
Found 0/5 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/force-publish.yml:1
- Warn: no topLevel permission defined: .github/workflows/publish.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/force-publish.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/overtrue/vue-avatar-cropper/force-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/force-publish.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/overtrue/vue-avatar-cropper/force-publish.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/force-publish.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/overtrue/vue-avatar-cropper/force-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/overtrue/vue-avatar-cropper/publish.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/overtrue/vue-avatar-cropper/publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/overtrue/vue-avatar-cropper/publish.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/overtrue/vue-avatar-cropper/publish.yml/master?enable=pin
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 3 third-party GitHubAction dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 25 are checked with a SAST tool
Score
2.6
/10
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More