Gathering detailed insights and metrics for vue-anka-cropper
Gathering detailed insights and metrics for vue-anka-cropper
Installations
npm install vue-anka-cropperDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
10.16.0
NPM Version
6.12.1
Releases
Unable to fetch releases
Languages
4
Vue
HTML
JavaScript
PHP
Vue (97.97%)
HTML (1.09%)
JavaScript (0.83%)
PHP (0.1%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
20 Stars
44 Commits
7 Forks
27 Branches
1 Contributors
Updated on Jun 25, 2024
Maintainers
1
Package Meta Information
Latest Version
1.1.0
Package Id
vue-anka-cropper@1.1.0
Unpacked Size
716.71 kB
Size
179.35 kB
File Count
10
NPM Version
6.12.1
Node Version
10.16.0
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
vue-anka-cropper
An easy image cropper and (optionally) uploader component for vue.js
Installation
NPM
1npm install vue-anka-cropper
and then in your app:
1import vueAnkaCropper from 'vue-anka-cropper' 2... 3components: {vueAnkaCropper} 4... 5<style> 6@import '../node_modules/vue-anka-cropper/dist/VueAnkaCropper.css'; 7...
CDN
1<link rel="stylesheet" href="https://unpkg.com/vue-anka-cropper@0.1.0/dist/VueAnkaCropper.css"> 2<script src="https://unpkg.com/vue/dist/vue.min.js"></script> 3<script src="https://unpkg.com/vue-anka-cropper/dist/VueAnkaCropper.umd.min.js"></script>
Usage
Most basic example. This is going to insert the cropper with default options:
1<template> 2 <div> 3 <h1>Vue Anka Cropper Example</h1> 4 <vue-anka-cropper></vue-anka-cropper> 5 </div> 6</template> 7<script> 8import vueAnkaCropper from 'vue-anka-cropper' 9export default { 10 name: 'cropperDemo', 11 components: {vueAnkaCropper} 12} 13</script>
Example with all the options and events:
1<template> 2 <div> 3 <h1>Vue Anka Cropper Example</h1> 4 <vue-anka-cropper 5 :options="{ 6 aspectRatio: 1, 7 closeOnSave: true, 8 cropArea: 'box', 9 croppedHeight: 400, 10 croppedWidth: 400, 11 cropperHeight: false, 12 dropareaMessage: 'Drop file here or use the button below.', 13 frameLineDash: [5,3], 14 frameStrokeColor: 'rgba(255, 255, 255, 0.8)', 15 handleFillColor: 'rgba(255, 255, 255, 0.2)', 16 handleHoverFillColor: 'rgba(255, 255, 255, 0.4)', 17 handleHoverStrokeColor: 'rgba(255, 255, 255, 1)', 18 handleSize: 10, 19 handleStrokeColor: 'rgba(255, 255, 255, 0.8)', 20 layoutBreakpoint: 850, 21 maxCropperHeight: 768, 22 maxFileSize: 8000000, 23 overlayFill: 'rgba(0, 0, 0, 0.5)', 24 previewOnDrag: true, 25 previewQuality: 0.65, 26 resultQuality: 0.8, 27 resultMimeType: 'image/jpeg', 28 selectButtonLabel: 'Select Files', 29 showPreview: true, 30 skin: 'light', 31 uploadData: {}, 32 uploadTo: false}" 33 @cropper-error="someAction(errorMessage)" 34 @cropper-file-selected="someAction(file)" 35 @cropper-preview="someAction(imageSource)" 36 @cropper-saved="someAction(cropData)" 37 @cropper-cancelled="someAction()" 38 @cropper-uploaded="someAction(serverResponse)"></vue-anka-cropper> 39 </div> 40</template> 41<script> 42import vueAnkaCropper from 'vue-anka-cropper' 43export default { 44 name: 'cropperDemo', 45 components: {vueAnkaCropper} 46} 47</script>
Options
| Option | Default Value | Allowed Values | Description |
|---|---|---|---|
| aspectRatio | 1 | false or number | if not false, it will lock the aspect ratio of cropped area. Aspect ratio everywhere in anka-cropper is width/ height |
| closeOnSave | true | boolean | whether to close the cropper after saving the result (hide the image, clear the data), not allowing further cropping |
| cropArea | 'box' | 'box' or 'circle' | Use 'circle' for round crop area (useful for avatars). If this is 'circle', aspectRatio will be locked to 1 |
| croppedHeight | 400 | false or integer | Desired height of the cropped image, in pixels |
| croppedWidth | 400 | false or integer | Desired width of the cropped image, in pixels |
| cropperHeight | false | false or integer | Fixed height of the cropper if needed. It will probably be removed in future versions, because this can be done much easier with css |
| dropareaMessage | 'Drop file here or use the button below' | string | Any message to appear in file drop area. |
| frameLineDash | [5,3] | array of intergers | A pattern of line dashes and spaces lengths. Main cropping frame will use this. Follow this specs: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash. Use [] (empty array} for continuos line |
| frameStrokeColor | 'rgba(255, 255, 255, 0.8)' | string | Color of the main cropping frame. |
| handleFillColor | 'rgba(255, 255, 255, 0.2)' | string | Color of the fill of cropping handles. |
| handleHoverFillColor | 'rgba(255, 255, 255, 0.4)' | string | Color of the fill of hovered cropping handles. |
| handleHoverStrokeColor | 'rgba(255, 255, 255, 1)' | string | Color of the stroke of hovered cropping handles. |
| handleSize | 10 | integer | Size of cropping handles, in pixels. Please note the size will be doubled, so 10 means they will be 20 x 20 pixels |
| handleStrokeColor | 'rgba(255, 255, 255, 0.8)' | string | Color of the stroke of cropping handles. |
| layoutBreakpoint | 850 | integer | If showPreview is true, this is the breakpoint at which the layout changes from vertical (preview at the bottom) to horizontal (preview on right) If showPreview is false this setting has no effect. This setting will probably be removed in future versions, because this should be handled with css. |
| maxCropperHeight | 768 | integer | Maximum height of the cropping area, in pixels |
| maxFileSize | 8000000 | false or integer | Maximum size of the file, in bytes. Set to false to allow files of any size |
| overlayFill | 'rgba(0, 0, 0, 0.5)' | string | color of the overlay outside of cropped image. |
| previewOnDrag | true | boolean | If true, the preview will be updated while user is dragging. It looks better, but may cause performance issues (especially with large files). If see such issues, change to false. |
| previewQuality | 0.65 | float | Quality of the preview image, 0 - 1. |
| resultQuality | 0.8 | float | Quality of the cropped image, 0 - 1 (if applicable, i.e. resultMimeType is a lossy type), lacking support in some browsers |
| resultMimeType | 'image/jpeg' | string | Mime type of the cropped image, any value supported by HTMLCanvasElement.toBlob() (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) |
| selectButtonLabel | 'Select Files' | string | Upload button label |
| showPreview | true | boolean | Whether to show the preview |
| skin | 'light' | string | Currently 'light' or 'dark' are available, you can also use any other name to create your own skin. |
| uploadData | {} | object | any additional data that should be uploaded with cropped image. |
| uploadTo | false | false or string | Path where to upload the cropped file. Right now, only relative path, in the same domain will work (CORS issues) |
Events
| Event | Payload | Description |
|---|---|---|
| cropper-mounted | - | Fires when cropper is mounted |
| cropper-error | string | Fires on any file reading error, returns an error message. |
| cropper-file-selected | file | Emitted after user selected a file and it has been recognized as a valid image file. |
| cropper-preview | dataURI | Fires when user stops dragging the cropping handle and returns image src as DataURI string. |
| cropper-saved | object | Fires when user clicked save button, returns an object described below. |
| cropper-cancelled | - | Fires when user cancels cropping. |
| cropper-uploaded | object | Fires after cropped image has been uploaded, and returns the response from server. |
| cropper-before-destroy | - | Fires before destroying cropper |
Response object
After cropping is done (user clicks on Save button) two things happen: cropper-saved event fires, and if uploadTo is not false, cropped image gets uploaded (firing cropper-uploaded event). Cropper-saved payload is an object, containing following fields:
- cropCoords, an object containing cropping coordinates keyed x, y, w and h. Coordinates are scaled to original image size.
- croppedFile, cropped image in form of a blob
- croppedImageURI, cropped image as dataURI
- filename, name of original uploaded file, without extension
- flippedH, boolean, indicating if original image was flipped horizontally
- flippedV, boolean, indicating if original image was flipped vertically
- originalFile, original file provided by user
- rotation, angle of image rotation in degrees (0, 90, 180 or 270 are only possible values)
Cropped Image Size
Options allow adding fixed ratio as well as width and height of the image. This might lead to distorted image, in case if requested width and height don't match aspect ratio. In such case, width and height will be treated as maximum allowed width and maximum allowed height, resulting in image with the requested aspect ratio, and fitting inside the box of requested dimensions. In case only one size is provided (width or height) and the other one set to false, the missing one will be calculated using either aspectRatio (if not false) or the aspect ratio of cropped area.
Creating Your Own Skin
Right now only two skins exist, light and dark. However, if you will use any other string as skin name, it will be added to the cropper outer element as a class. Then you can edit the css adding your skin rules.Please find the css of the dark skin below, use it as a skeleton for your skin (change "dark" to your skin name)
1.ankaCropper.dark { 2 background: #0f1114; 3 color: #eee 4} 5 6.ankaCropper.dark .ankaCropper__droparea { 7 border: 2px dashed #3e424b 8} 9 10.ankaCropper.dark .ankaCropper__saveButton, 11.ankaCropper.dark .ankaCropper__selectButton { 12 background: #334f90; 13 color: #fff 14} 15 16.ankaCropper.dark .ankaCropper__saveButton:hover, 17.ankaCropper.dark .ankaCropper__selectButton:hover { 18 background: #335dbe 19} 20 21.ankaCropper.dark .ankaCropper__navigation { 22 background: #1d2227 23} 24 25.ankaCropper.dark .ankaCropper__navButton { 26 background: #272c31 27} 28 29.ankaCropper.dark .ankaCropper__navButton svg { 30 stroke: #eee 31} 32 33.ankaCropper.dark .ankaCropper__navButton:hover { 34 background: #000 35} 36
RoadMap
- Revise the code, make it smaller. Remove some calculations, as this should be done with css.
- Add touch support
- Watch options and update on change.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/24 approved changesets -- score normalized to 0
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
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 6 are checked with a SAST tool
Reason
124 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-22h7-7wwg-qmgg
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-29xr-v42j-r956
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.7
/10
Last Scanned on 2025-07-14
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