@ballcat/vue-cropper

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:

# clone
git clone https://github.com/ballcat-projects/vue-cropper.git

# enter the folder
cd vue-cropper/example

# install dependency
npm install

# run it
npm run dev

Getting started

Installation

npm install @ballcat/vue-cropper

or

yarn add @ballcat/vue-cropper

Usage

Global Registration

import { createApp } from 'vue';
import App from './App';

import VueCropper from '@ballcat/vue-cropper';
import 'cropperjs/dist/cropper.css';

const app = createApp(App);

app.use(VueCropper).mount('#app');

Local Registration

<template>
  <vue-cropper 
      ref="vueCropperRef"
      :src="imgSrc"
      alt="Source Image"
  />
</template>
<script>
import {ref, onMounted} from 'vue'
import VueCropper from '@ballcat/vue-cropper';
import 'cropperjs/dist/cropper.css';

export default {
  components: {
    VueCropper,
  },
  setup() {
    const imgSrc = ref('the image path')
    const vueCropperRef = ref(null);

    onMounted(() => {
      console.log(vueCropperRef.value.getData());
    });

    return {
      imgSrc,
      vueCropperRef
    };
  }
};
</script>

or use setup script

<script setup>
import {ref, onMounted} from 'vue'
import VueCropper from '@ballcat/vue-cropper';
import 'cropperjs/dist/cropper.css';

const imgSrc = ref('the image path')
const vueCropperRef = ref(null);

onMounted(() => {
  console.log(vueCropperRef.value.getData());
});
</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