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

Cropperjs options

see cropperjs document

custom expose method