Advanced Image Cropper Library For Vue.js

Install & Download:

# Yarn
$ yarn add vue-advanced-cropper
# NPM
$ npm install vue-advanced-cropper --save

Description:

The advanced library gives you the opportunity to create your own image croppers suited for any website design. Compatible with Vue 2 and Vue 3.

Features:

Fully customizable
Mobile and touch support
Canvas and coordinates
zoom, rotate, resize image
and much more

How to use it:

1. Import and register the image cropper.

import Vue from 'vue'
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css';

new Vue({
  components: {
    Cropper
  }
})

2. Add the component to your app.

<div id="app">
  <cropper
    class="cropper"
    :src="img"
    @change="change"
  ></cropper>
</div>

new Vue({
  el: '#app',
  data: {
    img: '/path/to/img.jpg'
  },
  methods: {
    change({coordinates, canvas}) {
      console.log(coordinates, canvas)
    }
  },
  components: {
    Cropper
  }
})

3. Available component props.

src: {
  type: String,
  default: null,
},
stencilComponent: {
  type: [Object, String],
  default() {
    return RectangleStencil;
  },
},
backgroundWrapperComponent: {
  type: [Object, String],
  default() {
    return BackgroundWrapper;
  },
},
stencilProps: {
  type: Object,
  default() {
    return {};
  },
},
autoZoom: {
  type: Boolean,
  default: false,
},
imageClass: {
  type: String,
},
boundariesClass: {
  type: String,
},
backgroundClass: {
  type: String,
},
foregroundClass: {
  type: String,
},
minWidth: {
  type: [Number, String],
},
minHeight: {
  type: [Number, String],
},
maxWidth: {
  type: [Number, String],
},
maxHeight: {
  type: [Number, String],
},
debounce: {
  type: [Boolean, Number],
  default: 500,
},
transitions: {
  type: Boolean,
  default: true,
},
checkOrientation: {
  type: Boolean,
  default: true,
},
canvas: {
  type: [Object, Boolean],
  default: true,
},
crossOrigin: {
  type: [Boolean, String],
  default: undefined,
},
transitionTime: {
  type: Number,
  default: 300,
},
imageRestriction: {
  type: String,
  default: 'fit-area',
  validator(value) {
    return IMAGE_RESTRICTIONS.indexOf(value) !== -1;
  },
},
roundResult: {
  type: Boolean,
  default: true,
},
defaultSize: {
  type: [Function, Object],
},
defaultPosition: {
  type: [Function, Object],
  default: algorithms.defaultPosition,
},
defaultVisibleArea: {
  type: [Function, Object],
  default: algorithms.defaultVisibleArea,
},
defaultTransforms: {
  type: [Function, Object],
},
defaultBoundaries: {
  type: [Function, String],
  validator(value) {
    const invalid = typeof value === 'string' && value !== 'fill' && value !== 'fit';
    if (invalid) {
      if (process.env.NODE_ENV !== 'production') {
        console.warn(
          `Warning: prop "defaultBoundaries" gets incorrect string value ${value}. It should be either function, 'fill' or 'fit'`,
        );
      }
    }
    return !invalid;
  },
},
priority: {
  type: String,
  default: 'coordinates',
},
stencilSize: {
  type: [Object, Function],
},
resizeImage: {
  type: [Boolean, Object],
  default: true,
},
moveImage: {
  type: [Boolean, Object],
  default: true,
},
autoZoomAlgorithm: {
  type: Function,
},
resizeAlgorithm: {
  type: Function,
  default: algorithms.resize,
},
moveAlgorithm: {
  type: Function,
  default: algorithms.move,
},
initStretcher: {
  type: Function,
  default: algorithms.initStretcher,
},
fitCoordinates: {
  type: Function,
  default: algorithms.fitCoordinates,
},
fitVisibleArea: {
  type: Function,
  default: algorithms.fitVisibleArea,
},
areaRestrictionsAlgorithm: {
  type: Function,
  default: algorithms.dynamicAreaRestrictions,
},
sizeRestrictionsAlgorithm: {
  type: Function,
  default: algorithms.pixelsRestrictions,
},
positionRestrictionsAlgorithm: {
  type: Function,
  default: algorithms.positionRestrictions,
},