vue-cropperjs
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
Related Packages
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 5.0.0 | >=3.0.0 | MIT | |
| 4.2.0 | MIT | ||
| 4.1.0 | MIT | ||
| 4.0.1 | MIT | ||
| 4.0.0 | MIT | ||
| 3.0.0 | MIT | ||
| 2.2.2 | >=2.0.0 | MIT | |
| 2.2.1 | >=2.0.0 | MIT | |
| 2.2.0 | >=2.0.0 | MIT | |
| 2.1.1 | >=2.0.0 | MIT | |
| 2.1.0 | >=2.0.0 | MIT | |
| 2.0.4 | >=2.0.0 | MIT | |
| 2.0.3 | >=2.0.0 | MIT | |
| 2.0.2 | >=2.0.0 | MIT | |
| 2.0.1 | >=2.0.0 | MIT | |
| 2.0.0 | >=2.0.0 | MIT | |
| 1.0.3 | ^1.0.26 | MIT | |
| 1.0.2 | ^1.0.26 | MIT | |
| 1.0.1 | ^1.0.26 | MIT | |
| 1.0.0 | ^1.0.26 | MIT |