Vue.js Image Cropping Components – vuejs-clipper

Install & Download:

# NPM
$ npm install vuejs-clipper --save

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