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

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

Crop related options

See cropperjs documentation for all posible options & methods.

Renamed Methods

• relativeZoom from zoom
• initCrop from crop

License

MIT

Changelog

5.0.0 (February 1, 2021)

• add vue 3 support

4.2.0 (December 10, 2020)

• add optional crossorigin attribute to image

4.1.0 (April 16, 2020)

• Add events support
• Fix initialAspectRatio not being included in dist file
• Update cropperjs version

4.0.0 (May 26, 2018)

• BREAKING: Remove default css import
• Fix preview prop error in SSR

3.0.0 (December 2, 2018)

• Remove Vue dependency

2.2.2 (September 15, 2018)

• Update preview prop to accept Array, Element, NodeList #36

2.2.1 (June 1, 2018)

• Added initCrop method to show crop box manually #32