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

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.