The advanced library that gives you opportunity to create your own croppers suited for any website design
Documentation / Examples / Sandbox
WARNING: This library is in beta test stage. API can be changed in the future.
npm install --save vue-advanced-cropper
yarn add vue-advanced-cropper
If you would to use CDN read the corresponding documentation section
import Vue from 'vue'
import { Cropper } from 'vue-advanced-cropper'
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">
<cropper
classname="cropper"
:src="img"
:stencilProps="{
aspectRatio: 10/12
}"
@change="change"
></cropper>
</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;
}
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 | {} |
classname | String |
The optional classname for the root cropper block | |
imageClassname | String |
The optional classname for the cropping image | |
areaClassname | String |
The optional classname for the area. | |
backgroundClassname | String |
The optional classname for the background under the image | |
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) | 10 |
minHeight | String , Number |
The minimum height of the stencil (percents) | 10 |
maxWidth | String , Number |
The maximum width of the stencil (percents) | 10 |
maxHeight | String , Number |
The maximum height of the stencil (percents) | 10 |
checkOrientation | Boolean |
Check if EXIF orientation should be checked | true |
touchMove | Boolean |
Check if image should be dragged by a touch | true |
touchResize | Boolean |
Check if image should be resized by a pinch gesture | true |
mouseMove | Boolean |
Check if image should be dragged by a mouse | true |
wheelResize | Boolean |
Check if image should be resized by a mouse wheel | true |
imageRestriction | String |
Set restrictions for image position ('area', 'stencil', 'none') | core.move |
defaultSize | Function |
The function that returns the default size of the stencil | core.defaultSize |
defaultPosition | Function |
The function that returns the default position of the stencil | core.defaultPosition |
restrictions | Function |
The function that returns the restrictions object | core.percentRestrictions |
areaSize | Function |
The function that determines the area size | core.areaSize |
resizeAlgorithm | Function |
The function that determines the resize algorithm | core.resize |
moveAlgorithm | Function |
The function that determines the move algorithm | core.move |
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 |
Prop | Type | Description | Default |
---|---|---|---|
aspectRatio | Number , String , |
The aspect ratio | |
minAspectRatio | Number , String , |
The minimum aspect ratio | |
maxAspectRatio | Number , String , |
The maximum aspect ratio | |
classname | String , |
The classname for root block of the stencil component | |
previewClassname | String , |
The classname for the preview component | |
boundingBoxClassname | String , |
The classname for the bouding box component | |
handlerComponent | String ,Object |
The handler component | |
handlers | Object , |
The object of handlers that should be visible or hidden. | |
handlersClassnames | Object , |
The object of custom handler classnames | |
lineComponent | String ,Object |
The handler component | |
lines | Object , |
The object of lines that should be visible or hidden. | |
linesClassnames | Object , |
The object of custom line classnames |
The source code of this library is licensed under MIT, the documentation and photos are belong to their respective owners.