Vue

Introduction

The Doka Vue adapter exposes three different components.

• <Doka> useful for editing images on the page itself.
• <DokaModal> will open in a popover on top of the page.
• <DokaOverlay> will render on top of another element.

Attributes supplied to each component are passed on to the Doka core library, when they are bound they are named exactly like the default instance properties. If not, you can pass them as attributes.

This means that the configuration below:

Doka.create({
    cropAspectRatio: 1,
    cropAllowImageTurnRight: true,
    onconfirm: (output) => {
        console.log('Crop result', output);
    },
});

Is the same as this:

<Doka
    :cropAspectRatio="1"
    crop-allow-image-turn-right="true"
    @confirm="handleConfirm"
>
</Doka>

Examples

The examples below are included in the project package as demos and should give a good overview of how to use these components and can be used as development starting points.

Doka

The Doka Component can be used to render Doka inline.

<template>
    <div id="demo-inline">
        <h2>Doka Inline</h2>

        <Doka
            ref="doka"
            style="height:400px"
            crop-aspect-ratio="1"
            :crop-aspect-ratio-options="cropOptions"
            :src="src"
            @confirm="handleDokaConfirm"
            @cancel="handleDokaCancel"
        />
    </div>
</template>

<script>
    import { Doka } from './vue-doka/';

    export default {
        name: 'demo-modal',
        components: { Doka },
        data() {
            return {
                src: 'photo.jpeg',
                cropOptions: [
                    {
                        label: 'Free',
                        value: null,
                    },
                    {
                        label: 'Portrait',
                        value: 1.5,
                    },
                    {
                        label: 'Square',
                        value: 1,
                    },
                    {
                        label: 'Landscape',
                        value: 0.75,
                    },
                ],
            };
        },
        methods: {
            handleDokaConfirm(output) {
                console.log('Confirm crop!', output);
            },
            handleDokaCancel() {
                console.log('Cancel crop!');
            },
        },
    };
</script>

DokaModal

The DokaModal component opens Doka in a popover on top of the current page.

<template>
    <div id="demo-modal">
        <h2>Doka Modal</h2>

        <button @click="enabled=true">Show Modal</button>

        <DokaModal
            crop-aspect-ratio="1"
            :src="src"
            v-if="enabled"
            @confirm="handleDokaConfirm"
            @cancel="handleDokaCancel"
            @close="enabled=false"
        />

        <img v-if="result" :src="result" alt="" />
    </div>
</template>

<script>
    import { DokaModal, toURL } from './vue-doka/';

    export default {
        name: 'demo-modal',
        components: { DokaModal },
        data() {
            return {
                enabled: false,
                src: 'photo.jpeg',
                result: null,
            };
        },
        methods: {
            handleDokaConfirm(output) {
                console.log('Confirm crop!', output);
                this.result = toURL(output.file);
            },
            handleDokaCancel() {
                console.log('Cancel crop!');
            },
        },
    };
</script>

DokaOverlay

The DokaOverlay component renders on top on another image. This is useful when editing an image in place.

<template>
    <div id="demo-preview">
        <h2>Doka Overlay</h2>

        <button @click="enabled=true">Show Overlay</button>

        <DokaOverlay
            :enabled="enabled"
            :src="imageSource"
            :crop="imagePreviewCrop"
            @confirm="handleDokaConfirm"
            @cancel="handleDokaCancel"
        >
            <img :src="imagePreviewSource" alt="" />
        </DokaOverlay>
    </div>
</template>

<script>
    import { DokaOverlay, toURL } from './vue-doka';

    export default {
        name: 'demo-overlay',
        components: { DokaOverlay },
        data() {
            return {
                enabled: false,
                imagePreviewCrop: {
                    aspectRatio: 0.5,
                    rotation: -1.5707963268,
                },
                imagePreviewSource: 'photo-preview.jpeg',
                imageSource: 'photo.jpeg',
            };
        },
        methods: {
            handleDokaConfirm(output) {
                console.log('Confirm crop!', output);
                this.enabled = false;
                this.imagePreviewSource = toURL(output.file);
                this.imagePreviewCrop = output.data.crop;
            },
            handleDokaCancel() {
                console.log('Cancel crop!');
                this.enabled = false;
            },
        },
    };
</script>