Description:
Cutter is a lightweight, flexible, customizable, and extensible online image cropper for both desktop and mobile.
Also supports image zoom, rotate, pan, and much more.
Basic Usage:
1. Import and register the cutter component.
// globally import VueCutter from 'vue-cutter' Vue.use(VueCutter) // locally import { VueCutter } from 'vue-cutter' components: { VueCutter }
2. Create a basic image cropper in the app.
<template> <div> <vue-cutter :container-bounding="options.bounding" :src="options.src" :output-type="options.outputType" ></vue-cutter> </div> </template>
export default { name: "App", data() { return{ options: { bounding: ['300px', '300px'], src: '1.jpg', outputType: 'png' } } } }
3. All default configs.
containerBounding: { type: Array, default: () => { return ['0', '0'] } }, src: { type: [String, Blob, null, File], default: '' }, mode: { type: String, default: 'contain' }, highQuality: { type: Boolean, default: false }, // 0 - 1000; enlarge: { type: [Number, String], default: 1 }, // output format outputType: { type: String, default: 'jpeg' }, // max image size maxImgSize: { type: [Number, String], default: 2000 }, canImgMove: { type: Boolean, default: true }, boxInImg: { type: Boolean, default: false }, canScaleImg: { type: Boolean, default: true }, canCropMove: { type: Boolean, default: true }, cropBoxBounding: { type: [String, Number], default: 'auto' }, fixed: { type: [Array, String], default: () => { return null } }, canResizeCrop: { type: Boolean, default: true }, cropBorder: { type: String, default: 'solid' }, cropDividingLine: { type: Boolean, default: false }, cropInfo: { type: Boolean, default: false }
4. Available methods.
// add an image from local this.$refs.cutter.addLocalImage() // zoom in/out the image this.$refs.cutter.relativeZoom(param) // rotate the image this.$refs.cutter.rotateLeft() this.$refs.cutter.rotateRight() this.$refs.cutter.rotateClear() // get axis this.$refs.cutter.getImgAxis() this.$refs.cutter.getCropAxis() // get base64 data this.$refs.cutter.getBase64Data(funtion) // get blob data this.$refs.cutter.getBlobData(funtion)
Preview:
Download Details:
Author: lyuanshen
Live Demo: https://lyuanshen.github.io/vue-cutter/
Download Link: https://github.com/lyuanshen/vue-cutter/archive/master.zip
Official Website: https://github.com/lyuanshen/vue-cutter
Install & Download:
# NPM
$ npm i vue-cutter --save
# Bower
$ bower install vue-cutter --save