Home
Image
Simple Image Clipping Plugin For Vue 3/2

Simple Image Clipping Plugin For Vue 3/2

xyxiao001 Last Updated: 6 months ago

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.

  • @realTime
  • @imgMoving
  • @cropMoving
  • @imgLoad

Preview:

Simple Image Clipping Plugin For Vue

Changelog:

v1.0.5 (07/18/2022)

  • Updated for Vue 3

12/21/2020

  • v0.5.6

07/16/2020

  • v0.5.5

Download Details:

Author: xyxiao001

Live Demo: https://xyxiao001.github.io/vue-cropper/example/

Download Link: https://github.com/xyxiao001/vue-cropper/archive/master.zip

Official Website: https://github.com/xyxiao001/vue-cropper

Install & Download:

# Vue 2
$ npm i vue-cropper

# Vue 3
$ npm i [email protected]

Related Posts

Tags:

Add Comment