E Anka introduced a Vue js Image cropper & Uploader Component called Vue-Anka-cropper. It is an easy image cropper and (optionally) uploader component for vue.js.
You can see its demo here.

Installation

You can install this component via npm in your project.

npm install vue-anka-cropper

and then in your app:

import vueAnkaCropper from 'vue-anka-cropper'
...
components: {vueAnkaCropper}
...

<style>
@import '../node_modules/vue-anka-cropper/dist/VueAnkaCropper.css';
</style>

CDN

You can also utilize Cdn instead of installation.

<link rel="stylesheet" href="https://unpkg.com/vue-anka-cropper@0.1.0/dist/VueAnkaCropper.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-anka-cropper/dist/VueAnkaCropper.umd.min.js"></script>

Usage

Here is the most basic example. This is going to insert the cropper with default options:

<template>
    <div>
        <h1>Vue Anka Cropper Example</h1>
        <vue-anka-cropper></vue-anka-cropper>
    </div>
</template>
<script>
import vueAnkaCropper from 'vue-anka-cropper'
export default {
    name: 'cropperDemo',
    components: {vueAnkaCropper}
}
</script>

Example with all the options and events:

<template>
    <div>
        <h1>Vue Anka Cropper Example</h1>
        <vue-anka-cropper
           :options="{
               aspectRatio: 1,
               closeOnSave: true,
               cropArea: 'box',
               croppedHeight: 400,
               croppedWidth: 400,
               cropperHeight: false,
               dropareaMessage: 'Drop file here or use the button below.',
               frameLineDash: [5,3],
               frameStrokeColor: 'rgba(255, 255, 255, 0.8)',
               handleFillColor: 'rgba(255, 255, 255, 0.2)',
               handleHoverFillColor: 'rgba(255, 255, 255, 0.4)',
               handleHoverStrokeColor: 'rgba(255, 255, 255, 1)',
               handleSize: 10,
               handleStrokeColor: 'rgba(255, 255, 255, 0.8)',
               layoutBreakpoint: 850,
               maxCropperHeight: 768,
               maxFileSize: 8000000,
               overlayFill: 'rgba(0, 0, 0, 0.5)',
               previewOnDrag: true,
               previewQuality: 0.65,
               resultQuality: 0.8,
               resultMimeType: 'image/jpeg',
               selectButtonLabel: 'Select Files',
               showPreview: true,
               skin: 'light',
               uploadData: {},
               uploadTo: false}"
            @cropper-error="someAction(errorMessage)"
            @cropper-file-selected="someAction(file)"
            @cropper-preview="someAction(imageSource)"
            @cropper-saved="someAction(cropData)"
            @cropper-cancelled="someAction()"
            @cropper-uploaded="someAction(serverResponse)"></vue-anka-cropper>
    </div>
</template>
<script>
import vueAnkaCropper from 'vue-anka-cropper'
export default {
    name: 'cropperDemo',
    components: {vueAnkaCropper}
}
</script>

Response object

After cropping is done (user clicks on Save button) two things happen: cropper-saved event fires, and if uploadTo is not false, cropped image gets uploaded (firing cropper-uploaded event). Cropper-saved payload is an object, containing following fields:

• cropCoords, an object containing cropping coordinates keyed x, y, w, and h. Coordinates are scaled to the original image size.
• croppedFile, the cropped image in form of a blob
• croppedImageURI, cropped image as dataURI
• filename, name of the original uploaded file, without extension
• flippedH, boolean, indicating if the original image was flipped horizontally
• flippedV, boolean, indicating if the original image was flipped vertically
• originalFile, the original file provided by the user
• rotation, angle of image rotation in degrees (0, 90, 180, or 270 are only possible values)

Cropped Image Size

Options allow adding a fixed ratio as well as width and height of the image. This might lead to a distorted image, in case if requested width and height don’t match the aspect ratio. In such case, width and height will be treated as the maximum allowed width and maximum allowed height, resulting in an image with the requested aspect ratio, and fitting inside the box of requested dimensions. In case only one size is provided (width or height) and the other one is set to false, the missing one will be calculated using either aspectRatio (if not false) or the aspect ratio of the cropped area.

This package provides many options and events that you can view in its detailed documentation on Github.