https://github.com/agontuk/vue-cropperjs
A Vue wrapper component for cropperjs https://github.com/fengyuanchen/cropperjs
https://github.com/agontuk/vue-cropperjs
cropperjs vue-cropper-component vue-cropperjs
Last synced: 4 days ago
JSON representation
A Vue wrapper component for cropperjs https://github.com/fengyuanchen/cropperjs
- Host: GitHub
- URL: https://github.com/agontuk/vue-cropperjs
- Owner: Agontuk
- License: mit
- Created: 2016-09-23T10:22:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-25T22:37:03.000Z (about 1 year ago)
- Last Synced: 2025-05-13T03:02:31.038Z (5 days ago)
- Topics: cropperjs, vue-cropper-component, vue-cropperjs
- Language: JavaScript
- Size: 740 KB
- Stars: 950
- Watchers: 13
- Forks: 224
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-cropperjs
A Vue wrapper component for [cropperjs](https://github.com/fengyuanchen/cropperjs).
[](https://nodei.co/npm/vue-cropperjs/)
## Demo
Checkout here **[agontuk.github.io/vue-cropperjs](https://agontuk.github.io/vue-cropperjs/)**
## Installation
```shell
npm install --save vue-cropperjs
```
or
```
yarn add vue-cropperjs
```
> You will also need css & style loader for webpack
# Compatibility
| Vue Version | Package Version |
| ---------- | --------------- |
| 3.x.x | >=5.0.0 |
| 2.x.x | 4.2.0 |
| 1.x.x | 1.0.3 |
## Usage
```js
// Global
import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
Vue.component(VueCropper);
// Local
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
components: { VueCropper}
}
...
...
this.$refs.cropper.rotate(45);
```
See the [example](https://github.com/Agontuk/vue-cropperjs/tree/master/example) files & [cropperjs](https://github.com/fengyuanchen/cropperjs#cropperjs) documentation
## Options
| Name | Type | Required | Description |
| -------------- | -------- | -------- | ------------------------------- |
| src | `string` | -- | Image source |
| containerStyle | `object` | -- | Styling for the image container |
| imgStyle | `object` | -- | Styling for the image |
| alt | `string` | -- | Alternate text for the image |
## Crop related options
See cropperjs [documentation](https://github.com/fengyuanchen/cropperjs#options) for all posible options & methods.
### Renamed Methods
- `relativeZoom` from `zoom`
- `initCrop` from `crop`
## License
MIT