https://github.com/ballcat-projects/vue-cropper
vue image cropper components by cropperjs.
https://github.com/ballcat-projects/vue-cropper
cropper cropperjs vue-cropperjs vue3
Last synced: 7 months ago
JSON representation
vue image cropper components by cropperjs.
- Host: GitHub
- URL: https://github.com/ballcat-projects/vue-cropper
- Owner: ballcat-projects
- License: mit
- Created: 2022-06-16T14:02:02.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-08T03:03:03.000Z (almost 2 years ago)
- Last Synced: 2025-02-15T19:51:17.387Z (8 months ago)
- Topics: cropper, cropperjs, vue-cropperjs, vue3
- Language: Vue
- Homepage: https://ballcat-projects.github.io/vue-cropper/
- Size: 2.45 MB
- Stars: 15
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```shell
# 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
npm install @ballcat/vue-cropper
```
or
```yarn
yarn add @ballcat/vue-cropper
```
### Usage
#### Global Registration
```vue
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
```vue
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
};
}
};
```
or use setup script
```vue
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());
});
```
## 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](https://github.com/fengyuanchen/cropperjs/blob/main/README.md)
### custom expose method
| Method | Description | Type |
|:--------|:------------------------------|:-----------|
| flipX | flip the picture horizontally | () => void |
| flipY | flip the picture vertically | () => void |