A Vue wrapper component for cropperjs.
Checkout here agontuk.github.io/vue-cropperjs
npm install --save vue-cropperjs
or
yarn add vue-cropperjs
You will also need css & style loader for webpack
| Vue Version | Package Version |
|---|---|
| 3.x.x | >=5.0.0 |
| 2.x.x | 4.2.0 |
| 1.x.x | 1.0.3 |
// 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
| 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 |
See cropperjs documentation for all posible options & methods.
relativeZoomfromzoominitCropfromcrop
MIT