Awesome
vue-cropperjs
A Vue wrapper component for cropperjs.
Demo
Checkout here agontuk.github.io/vue-cropperjs
Installation
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
// 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}
}
...
<vue-cropper
ref="cropper"
:src="imgSrc"
alt="Source Image"
@ready="..."
@cropstart="..."
@cropmove="..."
@cropend="..."
@crop="..."
@zoom="..."
>
</vue-cropper>
...
this.$refs.cropper.rotate(45);
See the example files & 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 for all posible options & methods.
Renamed Methods
relativeZoomfromzoominitCropfromcrop
License
MIT