Advanced Image Cropper Library For Vue.js

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,
},

Preview:

Changelog:

v1.11.5 (10/04/2022)

• Bugfix

v1.11.3 (08/01/2022)

• Prevent the emitting of ‘change’ event if the cropper is unmounted

v1.11.1 (06/23/2022)

• Prevent the incorrect boundaries updating

v1.11.0 (06/20/2022)

• Fix the resetting of image transforms

v1.10.1 (02/14/2022)

• Fix the checking orientation of non local images

v1.10.0 (01/22/2022)

• Add the default transforms prop

v1.9.0 (11/14/2021)

• Add the possibility to redefine the scroll behavior

v1.7.0 (06/08/2021)

• Add ‘fillColor’ canvas property

v1.6.0 (05/25/2021)

Download Details:

Author: Norserium

Live Demo: https://norserium.github.io/vue-advanced-cropper/

Download Link: https://github.com/Norserium/vue-advanced-cropper/archive/master.zip

Official Website: https://github.com/Norserium/vue-advanced-cropper

Install & Download:

# Yarn
$ yarn add vue-advanced-cropper

# NPM
$ npm install vue-advanced-cropper --save