vue-anka-cropper

An easy image cropper and (optionally) uploader component for vue.js

Installation

NPM

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';
...

CDN

<link rel="stylesheet" href="https://unpkg.com/[email protected]/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

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>

Options

Events

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 original image size.
• croppedFile, cropped image in form of a blob
• croppedImageURI, cropped image as dataURI
• filename, name of original uploaded file, without extension
• flippedH, boolean, indicating if original image was flipped horizontally
• flippedV, boolean, indicating if original image was flipped vertically
• originalFile, original file provided by user
• rotation, angle of image rotation in degrees (0, 90, 180 or 270 are only possible values)

Cropped Image Size

Options allow adding fixed ratio as well as width and height of the image. This might lead to distorted image, in case if requested width and height don't match aspect ratio. In such case, width and height will be treated as maximum allowed width and maximum allowed height, resulting in 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 set to false, the missing one will be calculated using either aspectRatio (if not false) or the aspect ratio of cropped area.

Creating Your Own Skin

Right now only two skins exist, light and dark. However, if you will use any other string as skin name, it will be added to the cropper outer element as a class. Then you can edit the css adding your skin rules.Please find the css of the dark skin below, use it as a skeleton for your skin (change "dark" to your skin name)

.ankaCropper.dark {
    background: #0f1114;
    color: #eee
}

.ankaCropper.dark .ankaCropper__droparea {
    border: 2px dashed #3e424b
}

.ankaCropper.dark .ankaCropper__saveButton,
.ankaCropper.dark .ankaCropper__selectButton {
    background: #334f90;
    color: #fff
}

.ankaCropper.dark .ankaCropper__saveButton:hover,
.ankaCropper.dark .ankaCropper__selectButton:hover {
    background: #335dbe
}

.ankaCropper.dark .ankaCropper__navigation {
    background: #1d2227
}

.ankaCropper.dark .ankaCropper__navButton {
    background: #272c31
}

.ankaCropper.dark .ankaCropper__navButton svg {
    stroke: #eee
}

.ankaCropper.dark .ankaCropper__navButton:hover {
    background: #000
}

RoadMap

1. Revise the code, make it smaller. Remove some calculations, as this should be done with css.
2. Add touch support Added!
3. Watch options and update on change.