A Vue image cropper components by cropperjs.
Github: https://github.com/ballcat-projects/vue-cropper
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
npm install @ballcat/vue-cropper
or
yarn add @ballcat/vue-cropper
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');<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>
VueCropper props that can be used are divided into two parts, custom and all properties supported by cropperjs
| 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 | -- |
| Method | Description | Type |
|---|---|---|
| flipX | flip the picture horizontally | () => void |
| flipY | flip the picture vertically | () => void |