Description:
A set of Vue.js image clipping components using Vue-Rx.
How to use it:
1. Import the vuejs-clipper component and other required resources.
import Vue from 'vue' import VueRx from 'vue-rx' import VuejsClipper from 'vuejs-clipper'
2. Register the component.
// vue-rx Vue.use(VueRx) // vuejs-clipper Vue.use(VuejsClipper)
3. Add a basic image cropper to the template. All available components:
- clipperBasic
- clipperFixed
- clipperPreview
- clipperUpload
- clipperRange
<clipper-basic src="example.jpg"> </clipper-basic>
4. Available props for the clipperBasic component.
preview: {
type: String,
default: ''
},
src: {
type: String,
default: ''
},
border: {
type: Number,
default: 1
},
outline: {
type: Number,
default: 6
},
corner: {
type: Boolean,
default: true
},
grid: {
type: Boolean,
default: true
},
mode: {
type: String,
default: 'normal'
},
ratio: {
type: Number,
default: NaN
},
wrapRatio: {
type: Number,
default: NaN
},
touchCreate: {
// enable/disable create new zoom area in touch device;
type: Boolean,
default: true
},
rotate: {
type: Number,
default: 0
},
bgColor: {
type: String,
default: 'white'
},
lineColor: {
type: String,
default: '#1baae8'
},
shadow: {
type: String,
default: 'rgba(0, 0, 0, 0.4)'
},
scale: {
type: Number,
default: 1
},
minWidth: {
type: Number,
default: 1
},
minHeight: {
type: Number,
default: 1
},
initWidth: {
type: Number,
default: 50
},
initHeight: {
type: Number,
default: 50
},
crossOrigin: {
type: String,
default: undefined
}
5. Available props for the clipperFixed component.
src: {
type: String,
default: ''
},
rotate: {
type: Number,
default: 0
},
ratio: {
type: Number,
default: 1
},
zoomRate: {
type: Number,
default: 0.04
},
minScale: {
type: Number,
default: 0.1
},
bgColor: {
type: String,
default: 'white'
},
border: {
type: Number,
default: 1
},
borderColor: {
type: String,
default: 'white'
},
grid: {
type: Boolean,
default: true
},
shadow: {
type: String,
default: 'rgba(0, 0, 0, 0.4)'
},
round: {
type: Boolean,
default: false
},
preview: {
type: String,
default: ''
},
crossOrigin: {
type: String,
default: undefined
},
area: {
type: Number,
default: 50
},
handleZoomEvent: {
type: Function,
default: val => val
}
6. Available props for the clipperRange component.
value: {
type: Number,
default: 0
},
max: {
type: Number,
default: 10
},
min: {
type: Number,
default: 0
}
7. Available props for the clipperUpload component.
exif: {
type: Boolean,
default: true
},
value: {
type: String,
default: ''
},
check: {
type: Boolean,
default: true
}
Preview:
Changelog:
v4.0.0 (09/28/2021)
- Bugfix
v3.1.2 (01/13/2021)
- Fixed Touch event with wrong position
v3.1.1 (12/03/2020)
- Change layout and image position calculation
v3.1.0 (11/10/2020)
- Fix incorrect layout of clipper-basic
v3.0.4 (10/12/2020)
- clipper-upload accepts rest props as input attributes.
v3.0.2 (09/10/2020)
- Fix clipper-basic init/reset position
v3.0.0 (08/10/2020)
- Move rxjs, vue-rx from dependencies to peer dependencies.
v2.1.2 (08/04/2020)
- Bugfix: wrong scaling and rotation position of clipper-basic.
v2.1.1 (07/29/2020)
- Bugfix
v2.1.0 (06/15/2020)
- Bugfix
Download Details:
Author: timtnleeProject
Live Demo: https://timtnleeproject.github.io/vuejs-clipper/#/
Download Link: https://github.com/timtnleeProject/vuejs-clipper/archive/master.zip
Official Website: https://github.com/timtnleeProject/vuejs-clipper
Install & Download:
# NPM
$ npm install vuejs-clipper --save