Vue.js image cropping components using Vue-Rx. Add Image Crop components to your Vue app in anything flat. Touch devices are fully supported and responsive.

vue image crop upload, vue cropper example, vue advanced cropper example, vue avatar cropper, vuetify image cropper, image cropper in html, vue 3 image cropper

How to make use of it:

Install and download:

# NPM
$ npm install vuejs-clipper --save

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 cropping tool to the template.

<clipper-basic src="example.jpg">
</clipper-basic>

4. Props available for 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. Props available for 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. Props available for clipperRange component.

value: {
  type: Number,
  default: 0
},
max: {
  type: Number,
  default: 10
},
min: {
  type: Number,
  default: 0
}

7. Props available for clipperUpload component.

exif: {
  type: Boolean,
  default: true
},
value: {
  type: String,
  default: ''
},
check: {
  type: Boolean,
  default: true
}

Props

Vue.js Image Cropping Components, vuejs-clipper Plugin/Github

See Demo And Download

Official Website(timtnleeProject): Click Here

This superior jQuery/javascript plugin is developed by timtnleeProject. For extra Advanced Usages, please go to the official website.