Published on: Mar 7, 2019

Adding the Doka Javascript image editor to your application.

Doka Image Editor

Doka is a Javascript image editor that can be easily integrated in your website or web application.

We recently bought a license to use it in a web application I've been working on and I spent the last couple of days integrating it in our app. It only takes a couple of minutes to have the editor up and running in any app but I've spent the last couple of days building backend components to upload the edited image to S3 and update the reference in our database.

Doka can be used as a vanilla JS library but luckily it also provides adapters for Vue and React. Since the project I work on uses Vue for interactive parts of the frontend it was super easy to import the components Doka provides and just set them up to work on our app.

Editable Images

For images that would be editable with the Doka editor I created a EditableImage.vue component and used that instead of the normal <img html component for any images that could be edited with Doka.

<template>

    <div class="editable-image">

        <button type="button" class="editable-image-edit-button" @click="enabled = true">
            Edit
        </button>

        // Shows a "Uploading..." progress.
        <image-uploading-progress v-if="uploading" />

        // Actual image. 
        <img ref="image" :class="classes" :src="image.url" :width="width" :height="height" crossorigin="anonymous">

        // Doka Editor
        <DokaModal 
        v-if="enabled"
        :src="image.url"
        :outputData="true"
        @confirm="handleDokaConfirm"
        @cancel="handleDokaCancel"
        @close="enabled = false"/>

    </div>

</template>

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

export default {

    name: 'EditableImage',

    props: {
        classes: {
            required: true,
            type: String,
        },
        image: {
            required: true,
            type: Object,
        },
        width: {
            required: true,
            type: String,
        },
        height: {
            required: true,
            type: String,
        },
    },

    components: {
        DokaModal,
        ImageUploadingProgress
    },

    data() {
        return {
            enabled: false,
            uploading: false,
        }
    },

    methods: {
        async handleDokaConfirm(output) {
            this.$refs.image.src = toURL(output.file);

            this.uploading = true;

            var data = new FormData();
            data.append('image', output.file);

            await $.ajax({
                url: 'some-endpoint',
                type: 'POST',
                data: data,
                processData: false,
                contentType: false,
            }).done(response => {
                this.enabled = false;
                this.uploading = false;
                this.$refs.image.src = response;
            }).fail(error => {
                this.$refs.image.src = this.image;
                this.uploading = false;
            });
        },
        handleDokaCancel() {
            console.log('Cancel crop!');
            this.enabled = false;
        }
    }
}
</script>

With this approach in any place in the app I can just use this component and pass a url to any image to let the user edit the image.

<!--Editable image-->
<editable-image image="domain.com/image.jpg" classes="img-fluid editable-item" width="200" height="200" />

<!--Normal image-->
<img src="domain.com/image.jpg" class="img-fluid editable-item" width="200" height="200">

Doka has 3 layout modes that can be accessed via Vue components. Those are <Doka>, <DokaModal> and <DokaOverlay>. The <Doka> component will add the editor inline anywhere in the page, DokaModal will open the editor, well, in a modal window. Lastly, the DokaOverlay is used when wanting to open the editor on top of another element, think of a header image that you want to edit inline.

For more information and demos of the Doka editor you should visit their landing page. The editor is very robust, easy to use and really easy to integrate in any web application.

I won't share no actual screenshots of the implementation of the editor since it's something built for a client but feel free to visit the Doka home page to see for yourself how good the editor looks.