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