Norserium launched a highly efficient Vue Js Image cropper called Vue Advanced Cropper, Which allows you to create almost any cropper that you desire. It is easy to use and customize. It provides support for desktop and mobile devices. It has built-in support for touch events, cropper resizing, etc.
This Cropper can be used to create a canvas with a cropped area or just coordinates relative to the original image to crop it server-side in the future. It has many advanced features like, It can set minimum and maximum aspect ratios, and it can also customize minimum and maximum height and width.

Installation

You can install this via npm or yarn.

Npm

npm install --save vue-advanced-cropper

Yarn

yarn add vue-advanced-cropper

Usage

After the installation, you’ve to import this into your view component.

import Vue from 'vue'
import { Cropper } from 'vue-advanced-cropper'

new Vue({
  el: '#app',
  data: {
    img: 'https://images.pexels.com/photos/226746/pexels-photo-226746.jpeg'
  },
  methods: {
    change({coordinates, canvas}) {
      console.log(coordinates, canvas)
    }
  },
  components: {
    Cropper
  }
})

//html
<div id="app">
  <cropper
    classname="cropper"
    :src="img"
    :stencilProps="{
      aspectRatio: 10/12
    }"
    @change="change"
  ></cropper>
</div>

You can set the limits for the cropper sizes or its container sizes. Otherwise, a cropping image will try to fill all available space.

.cropper {
  height: 600px;
  background: #DDD;
}

Props

Prop	Type	Description	Default
src	String	The cropping image (link / base64)	-
stencilComponent	String, Object	The stencil component	RectangleStencil
stencilProps	Object	The props for the stencil component	{}
class	String	The optional class for the root cropper block	-
imageClass	String	The optional class for the cropping image	-
boundariesClass	String	The optional class for the area.	-
backgroundClass	String	The optional class for the background under the image	-
autoZoom	Boolean	Enable / disable transitions	false
autoZoom	Boolean	Enable / disable auto zoom	true
stencilSize	Object	The size of the stencil in pixels	-
debounce	String, Number	The time before change event will be emitted after changes (ms)	500

There are a lot of other props and events available in this advanced Vue Cropper, if you want to utilize it, you should view its whole documentation here.