2.0 KiB
		
	
	
	
	
	
	
	
			
		
		
	
	
			2.0 KiB
		
	
	
	
	
	
	
	
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
