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:
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]