The advanced library gives you the opportunity to create your own image croppers suited for any website design. Compatible with Vue 2 and Vue 3.
Features:
- Fully customizable
- Mobile and touch support
- Canvas and coordinates
- zoom, rotate, resize image
- and much more
How to use it:
1. Import and register the image cropper.
import Vue from 'vue' import { Cropper } from 'vue-advanced-cropper' import 'vue-advanced-cropper/dist/style.css';
new Vue({ components: { Cropper } })
2. Add the component to your app.
<div id="app"> <cropper class="cropper" :src="img" @change="change" ></cropper> </div>
new Vue({ el: '#app', data: { img: '/path/to/img.jpg' }, methods: { change({coordinates, canvas}) { console.log(coordinates, canvas) } }, components: { Cropper } })
3. Available component props.
src: { type: String, default: null, }, stencilComponent: { type: [Object, String], default() { return RectangleStencil; }, }, backgroundWrapperComponent: { type: [Object, String], default() { return BackgroundWrapper; }, }, stencilProps: { type: Object, default() { return {}; }, }, autoZoom: { type: Boolean, default: false, }, imageClass: { type: String, }, boundariesClass: { type: String, }, backgroundClass: { type: String, }, foregroundClass: { type: String, }, minWidth: { type: [Number, String], }, minHeight: { type: [Number, String], }, maxWidth: { type: [Number, String], }, maxHeight: { type: [Number, String], }, debounce: { type: [Boolean, Number], default: 500, }, transitions: { type: Boolean, default: true, }, checkOrientation: { type: Boolean, default: true, }, canvas: { type: [Object, Boolean], default: true, }, crossOrigin: { type: [Boolean, String], default: undefined, }, transitionTime: { type: Number, default: 300, }, imageRestriction: { type: String, default: 'fit-area', validator(value) { return IMAGE_RESTRICTIONS.indexOf(value) !== -1; }, }, roundResult: { type: Boolean, default: true, }, defaultSize: { type: [Function, Object], }, defaultPosition: { type: [Function, Object], default: algorithms.defaultPosition, }, defaultVisibleArea: { type: [Function, Object], default: algorithms.defaultVisibleArea, }, defaultTransforms: { type: [Function, Object], }, defaultBoundaries: { type: [Function, String], validator(value) { const invalid = typeof value === 'string' && value !== 'fill' && value !== 'fit'; if (invalid) { if (process.env.NODE_ENV !== 'production') { console.warn( `Warning: prop "defaultBoundaries" gets incorrect string value ${value}. It should be either function, 'fill' or 'fit'`, ); } } return !invalid; }, }, priority: { type: String, default: 'coordinates', }, stencilSize: { type: [Object, Function], }, resizeImage: { type: [Boolean, Object], default: true, }, moveImage: { type: [Boolean, Object], default: true, }, autoZoomAlgorithm: { type: Function, }, resizeAlgorithm: { type: Function, default: algorithms.resize, }, moveAlgorithm: { type: Function, default: algorithms.move, }, initStretcher: { type: Function, default: algorithms.initStretcher, }, fitCoordinates: { type: Function, default: algorithms.fitCoordinates, }, fitVisibleArea: { type: Function, default: algorithms.fitVisibleArea, }, areaRestrictionsAlgorithm: { type: Function, default: algorithms.dynamicAreaRestrictions, }, sizeRestrictionsAlgorithm: { type: Function, default: algorithms.pixelsRestrictions, }, positionRestrictionsAlgorithm: { type: Function, default: algorithms.positionRestrictions, },
Preview:
Changelog:
v1.11.5 (10/04/2022)
- Bugfix
v1.11.3 (08/01/2022)
- Prevent the emitting of ‘change’ event if the cropper is unmounted
v1.11.1 (06/23/2022)
- Prevent the incorrect boundaries updating
v1.11.0 (06/20/2022)
- Fix the resetting of image transforms
v1.10.1 (02/14/2022)
- Fix the checking orientation of non local images
v1.10.0 (01/22/2022)
- Add the default transforms prop
v1.9.0 (11/14/2021)
- Add the possibility to redefine the scroll behavior
v1.7.0 (06/08/2021)
- Add ‘fillColor’ canvas property
v1.6.0 (05/25/2021)
Download Details:
Author: Norserium
Live Demo: https://norserium.github.io/vue-advanced-cropper/
Download Link: https://github.com/Norserium/vue-advanced-cropper/archive/master.zip
Official Website: https://github.com/Norserium/vue-advanced-cropper
Install & Download:
# Yarn
$ yarn add vue-advanced-cropper
# NPM
$ npm install vue-advanced-cropper --save