vue-advanced-cropper

v2.8.8

The advanced library to create your own croppers suited for any website design For more information about how to use this package see README

Latest version published 1 year ago

License: MIT

NPM

GitHub

Package Health Score

62 / 100

security
No known security issues
popularity
Recognized
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
1.11.6	\|	01/2023		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.8.8	\|	01/2023	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.7.1	\|	01/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.20.1	\|	12/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.19.3	\|	12/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Recognized

Weekly Downloads (75,408)

GitHub Stars: 900
Forks: 124
Contributors: 20

Direct Usage Popularity

The npm package vue-advanced-cropper receives a total of 75,408 downloads a week. As such, we scored vue-advanced-cropper popularity level to be Recognized.

Based on project statistics from the GitHub repository for the npm package vue-advanced-cropper, we found that it has been starred 900 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: No
Contributors: 20
Funding: No

With more than 10 contributors for the vue-advanced-cropper repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like vue-advanced-cropper is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

Open Issues: 23
Open PR: 1
Last Release: 1 year ago
Last Commit: 7 months ago

Further analysis of the maintenance status of vue-advanced-cropper based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for vue-advanced-cropper is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >=8

Age: 5 years
Dependencies: 3 Direct
Versions: 116
Install Size: 380 kB
Dist-tags: 3
# of Files: 15
Maintainers: 1
TS Typings: No

vue-advanced-cropper has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

Documentation / Examples / Sandbox / Sandbox + Composition API

🔥 HEADS UP! You're currently looking at the branch for Vue 3. If you're looking for the branch for Vue 2, please check out master branch.

Vue Advanced Cropper is the advanced library that gives you opportunity to create your own croppers suited for any website design. It means that you are able to change not only the cropper appearance, you area able to customize its behavior also.

Features:

full mobile / desktop support
support all three main types of croppers right out of the box
support both canvas and coordinates modes, minimum and maximum aspect ratios, custom size restrictions
zoom, rotate, resize image
auto-zoom, transitions

The codesandbox for mobile / desktop examples above.

Install

Vue 3.0

npm install --save vue-advanced-cropper@next

yarn add vue-advanced-cropper@next

Vue 2.0

npm install --save vue-advanced-cropper@vue-2

yarn add vue-advanced-cropper@vue-2

If you would to use CDN read the corresponding documentation section

Usage

import Vue from 'vue'
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css';

new Vue({
  el: '#app',
  data: {
    img: 'https://images.pexels.com/photos/226746/pexels-photo-226746.jpeg'
  },
  methods: {
    change({coordinates, canvas}) {
      console.log(coordinates, canvas)
    }
  },
  components: {
    Cropper
  }
})

<div id="app">
  
</div>

/*
  Maybe you need to set the limits for the cropper sizes or its container sizes
  otherwise a cropping image will try to fill all available space
*/
.cropper {
  height: 600px;
  background: #DDD;
}

Cropper

Prop	Type	Description	Default
src	`String`	The cropping image (link / base64)
stencilComponent	`String`, `Object`	The stencil component	`RectangleStencil`
stencilProps	`Object`	The props for the stencil component	`{}`
class	`String`	The optional class for the root cropper block
imageClass	`String`	The optional class for the cropping image
boundariesClass	`String`	The optional class for the area.
backgroundClass	`String`	The optional class for the background under the image
autoZoom	`Boolean`	Enable / disable transitions	`false`
transitions	`Boolean`	Enable / disable auto zoom	`true`
stencilSize	`Object`	The size of the stencil in pixels
debounce	`String`, `Number`	The time before change event will be emitted after changes (ms)	`500`
canvas	`Boolean`	The flag that indicates if canvas should be used	`true`
minWidth	`String`, `Number`	The minimum width of the stencil (percents)
minHeight	`String`, `Number`	The minimum height of the stencil (percents)
maxWidth	`String`, `Number`	The maximum width of the stencil (percents)
maxHeight	`String`, `Number`	The maximum height of the stencil (percents)
checkOrientation	`Boolean`	Check if EXIF orientation should be checked	`true`
resizeImage	`Boolean`, `Object`	The options for the image resizing (details)	`true`
moveImage	`Boolean`, `Object`	The options for the image moving (details)	`true`
imageRestriction	`String`	Set restrictions for image position ('fill-area' 'fit-area', 'stencil', 'none')	`'fill-area'`
defaultSize	`Object`, `Function`	The function that returns the default size of the stencil or object	`core.defaultSize`
defaultPosition	`Object`, `Function`	The function that returns the default position of the stencil or object	`core.defaultPosition`
defaultBoundaries	`String`, `Function`	The function that determines the boundaries size or string (`'fill'`, `'fit'`)	`'fill'`
sizeRestrictionsAlgorithm	`Function`	The function that returns the restrictions object

Event	Description
change	Invoked on changing of a stencil position / size, after mounting the component and on an image changing
ready	Invoked on success of an image loading
error	Invoked on error of an image loading

RectangleStencil

Prop	Type	Description
aspectRatio	`Number`	The aspect ratio
minAspectRatio	`Number`	The minimum aspect ratio
maxAspectRatio	`Number`	The maximum aspect ratio
class	`String`	The class for root block of the stencil component
previewClass	`String`	The class for the preview component
movingClass	`String`	The class applied when user drag the stencil
resizingClass	`String`	The class applied when user resize the stencil
boundingBoxClass	`String`	The class for the bounding box component
handlerComponent	`String`,`Object`	The handler component
handlers	`Object`	The object of handlers that should be visible or hidden.
handlersClasses	`Object`	The object of custom handler classes
handlersWrappersClasses	`Object`	The object of custom handler wrapper classes
lineComponent	`String`,`Object`	The handler component
lines	`Object`	The object of lines that should be visible or hidden.
linesClasses	`Object`	The object of custom line classes
linesWrappersClasses	`Object`	The object of custom line wrapper classes

License

The source code of this library is licensed under MIT, the documentation and photos are belong to their respective owners.

vue-advanced-cropper dependencies

classnames debounce easy-bem

FAQs

What is vue-advanced-cropper?

The advanced library to create your own croppers suited for any website design. Visit Snyk Advisor to see a full health score report for vue-advanced-cropper, including popularity, security, maintenance & community analysis.

Is vue-advanced-cropper popular?

The npm package vue-advanced-cropper receives a total of 75,408 weekly downloads. As such, vue-advanced-cropper popularity was classified as a recognized. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is vue-advanced-cropper well maintained?

We found indications that vue-advanced-cropper is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is vue-advanced-cropper safe to use?

The npm package vue-advanced-cropper was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 24 April-2024, at 19:24 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

vue-advanced-cropper

The advanced library to create your own croppers suited for any website design For more information about how to use this package see README

Ensure you're using the healthiest npm packages

Package Health Score

Explore Similar Packages

Security

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Popularity

Weekly Downloads (75,408)

Direct Usage Popularity

Community

Embed Package Health Score Badge

Maintenance

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Package

Readme

Install

Vue 3.0

Vue 2.0

Usage

Cropper

RectangleStencil

License

vue-advanced-cropper dependencies

vue-advanced-cropper development dependencies

FAQs

What is vue-advanced-cropper?

Is vue-advanced-cropper popular?

Is vue-advanced-cropper well maintained?

Is vue-advanced-cropper safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Fix identified vulnerabilities

Monitor for new issues

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (75,408)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

Install

Vue 3.0

Vue 2.0

Usage

Cropper

RectangleStencil

License

vue-advanced-cropper dependencies

vue-advanced-cropper development dependencies

FAQs

What is vue-advanced-cropper?

Is vue-advanced-cropper popular?

Is vue-advanced-cropper well maintained?

Is vue-advanced-cropper safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues