vue-cropper

A Vue image cropper components by cropperjs.

Github: https://github.com/ballcat-projects/vue-cropper

Demo

online demo: https://ballcat-projects.github.io/vue-cropper

You can also clone the repository and run the demo locally:

1# clone
2git clone https://github.com/ballcat-projects/vue-cropper.git
3
4# enter the folder
5cd vue-cropper/example
6
7# install dependency
8npm install
9
10# run it
11npm run dev

Getting started

Installation

1npm install @ballcat/vue-cropper

or

1yarn add @ballcat/vue-cropper

Usage

Global Registration

1import { createApp } from 'vue';
2import App from './App';
3
4import VueCropper from '@ballcat/vue-cropper';
5import 'cropperjs/dist/cropper.css';
6
7const app = createApp(App);
8
9app.use(VueCropper).mount('#app');

Local Registration

1<template>
2  <vue-cropper 
3      ref="vueCropperRef"
4      :src="imgSrc"
5      alt="Source Image"
6  />
7</template>
8<script>
9import {ref, onMounted} from 'vue'
10import VueCropper from '@ballcat/vue-cropper';
11import 'cropperjs/dist/cropper.css';
12
13export default {
14  components: {
15    VueCropper,
16  },
17  setup() {
18    const imgSrc = ref('the image path')
19    const vueCropperRef = ref(null);
20
21    onMounted(() => {
22      console.log(vueCropperRef.value.getData());
23    });
24
25    return {
26      imgSrc,
27      vueCropperRef
28    };
29  }
30};
31</script>

or use setup script

1<script setup>
2import {ref, onMounted} from 'vue'
3import VueCropper from '@ballcat/vue-cropper';
4import 'cropperjs/dist/cropper.css';
5
6const imgSrc = ref('the image path')
7const vueCropperRef = ref(null);
8
9onMounted(() => {
10  console.log(vueCropperRef.value.getData());
11});
12</script>

API

VueCropper props that can be used are divided into two parts, custom and all properties supported by cropperjs

custom options

Property	Description	Type	Required
src	origin image src	string	true
imgStyle	the img element style	object	--
imgCrossOrigin	the img element crossOrigin attribute value	string	--
alt	the img element alt attribute value	boolean	--

Cropperjs options

see cropperjs document

custom expose method

Method	Description	Type
flipX	flip the picture horizontally	() => void
flipY	flip the picture vertically	() => void