Simple Image Clipping Plugin For Vue 3/2

Install & Download:

# Vue 2
$ npm i vue-cropper
# Vue 3
$ npm i vue-cropper@next

Description:

A simple, customizable, and developer-friendly image cropper for Vue.js 3/2 application.

How to use it:

1. Import and register the image cropper.

// Vue 3 (Global)
import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'
const app = createApp(App)
app.use(VueCropper)
app.mount('#app')
// Vue 3 (Local)
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";

// Vue 2 (Global)
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
// Vue 2 (Local)
import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}

2. Add the image cropper to your app.

<vueCropper
  ref="cropper"
  :img="option.img"
  :outputSize="option.size"
  :outputType="option.outputType"
></vueCropper>

3. Available component props.

img: {
  type: [String, Blob, null, File],
  default: ""
},
// 0.1 - 1
outputSize: {
  type: Number,
  default: 1
},
// jpeg, png, webp
outputType: {
  type: String,
  default: "jpeg"
},
// shows cropper info
info: {
  type: Boolean,
  default: true
},
// enable wheel to zoom
canScale: {
  type: Boolean,
  default: true
},
// auto generate cropper
autoCrop: {
  type: Boolean,
  default: false
},
autoCropWidth: {
  type: [Number, String],
  default: 0
},
autoCropHeight: {
  type: [Number, String],
  default: 0
},
// enable fixed width/height
fixed: {
  type: Boolean,
  default: false
},
// w/h
fixedNumber: {
  type: Array,
  default: () => {
    return [1, 1];
  }
},
// fixed box size
fixedBox: {
  type: Boolean,
  default: false
},
// 输出截图是否缩放
full: {
  type: Boolean,
  default: false
},
// enable moveable
canMove: {
  type: Boolean,
  default: true
},
canMoveBox: {
  type: Boolean,
  default: true
},
original: {
  type: Boolean,
  default: false
},
centerBox: {
  type: Boolean,
  default: false
},
// output hi-res image
high: {
  type: Boolean,
  default: true
},
infoTrue: {
  type: Boolean,
  default: false
},
maxImgSize: {
  type: [Number, String],
  default: 2000
},
// 0 - 1000
enlarge: {
  type: [Number, String],
  default: 1
},
// width of preview box
preW: {
  type: [Number, String],
  default: 0
},
// contain , cover, 100px, 100% auto
mode: {
  type: String,
  default: "contain"
},
limitMinSize: {
  type: [Number, Array, String],
  default: () => {
    return 10;
  }
},

4. API methods.

this.$refs.cropper.cropW
this.$refs.cropper.cropH
this.$refs.cropper.startCrop()
this.$refs.cropper.stopCrop()
this.$refs.cropper.clearCrop()
this.$refs.cropper.changeScale()
this.$refs.cropper.getImgAxis()
this.$refs.cropper.getCropAxis()
this.$refs.cropper.goAutoCrop
this.$refs.cropper.rotateRight()
this.$refs.cropper.rotateLeft()

5. Callbacks.