Gathering detailed insights and metrics for vue-avatar-cropper
Gathering detailed insights and metrics for vue-avatar-cropper
👧 A simple and elegant avatar cropping and upload plugin.
Installations
npm install vue-avatar-cropperDeveloper Guide
BETA
Typescript
No
Module System
CommonJS, ESM, UMD
Min. Node Version
>=10
Node Version
21.6.2
NPM Version
10.2.4
Releases
Unable to fetch releases
Languages
3
JavaScript
Vue
HTML
JavaScript (59.27%)
Vue (33.61%)
HTML (7.13%)
Developer
overtrue
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
517 Stars
885 Commits
92 Forks
8 Watchers
13 Branches
15 Contributors
Updated on Jul 04, 2025
Maintainers
1
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
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
21
@babel/core@babel/plugin-transform-async-to-generator@babel/plugin-transform-regenerator@babel/plugin-transform-runtime@babel/preset-env@rollup/plugin-babel@vue/compiler-sfcautoprefixereslinteslint-plugin-vuenode-sassnpm-run-allpostcssrolluprollup-plugin-peer-deps-externalrollup-plugin-postcssrollup-plugin-terserrollup-plugin-vuesirv-clivuevue-eslint-parser
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
7 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- 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-f5x3-32g6-xq36
Reason
Found 0/5 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
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
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
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
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
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.5
/10
Last Scanned on 2025-07-07
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