Setting up Doka Image Editor with Svelte

For a quick start use the Svelte example project included in the product package as a guideline. It includes a normal, modal, and overlay editor example.

We can install doka and svelte-doka with npm by copying both of the dependencies to the 'local_modules' folder in root of our Svelte project and running the following command to install them locally.

npm install --save ./local_modules/svelte-doka ./local_modules/doka

Now we can import the modules like we normally would and use the Svelte <DokaImageEditor>, <DokaImageEditorModal>, and <DokaImageEditorOverlay> components.

Events and properties

To listen for events we can use the on: attribute.

<DokaImageEditor on:load={handleEvent}></DokaImageEditor>

Properties names are set the same way as in the JavaScript version of the editor.

<DokaImageEditor src="image.jpeg" imageCropAspectRatio={1}></DokaImageEditor>

Default implementation example

In the default example below we'll use the getEditorDefaults method to quickly create an image editor.

This creates a "default" editor that has all available plugins loaded and comes preset with all plugin default options and English locale. Each of these settings can be adjusted freely.

<script>
    // Import from `doka`
    import 'doka/doka.css';

    // Import the editor default configuration
    import { getEditorDefaults } from 'doka';

    // Import from `svelte-doka`
    import { DokaImageEditor } from 'svelte-doka';
</script>

<div style="height:600px">
    <DokaImageEditor
        {...getEditorDefaults()}
        src="my-image.jpeg"
        imageCropAspectRatio={1}
    />
</div>

Advanced implementation example

In this example we'll create a custom editor, using a custom set of plugins, locale, and available options.

While this example is a lot more verbose it does allow us to create a more optimal editor package. The build process will tree-shake unused functionality resulting in a smaller build target.

<script>
// Import from `doka`
import 'doka/doka.css';

// Import the editor functionality
import {
    // Import the default image reader and writer
    createDefaultImageReader,
    createDefaultImageWriter,

    // The method used to register the plugins
    setPlugins,

    // The plugins we want to use
    plugin_crop,
    plugin_finetune,
    plugin_annotate,

    // The user interface and plugin locale objects
    locale_en_gb,
    plugin_crop_locale_en_gb,
    plugin_finetune_locale_en_gb,
    plugin_annotate_locale_en_gb,

    // Because we use the annotate plugin we also need
    // to import the markup editor locale
    markup_editor_locale_en_gb,

    // Import the default configuration for the markup editor and finetune plugins
    markup_editor_defaults,
    plugin_finetune_defaults,
} from 'doka';

// Import from `svelte-doka`
import { DokaImageEditor } from 'svelte-doka';

// This registers the plugins with Doka Image Editor
setPlugins(plugin_crop, plugin_finetune, plugin_filter);

// Create our editor configuration
const editorConfig = {
    // This will read the image data (required)
    imageReader: createDefaultImageReader(),

    // This will write the output image
    imageWriter: createDefaultImageWriter(),

    // The markup editor default options, tools, shape style controls
    ...markup_editor_defaults,

    // The finetune util controls
    ...plugin_finetune_defaults,

    // The icons and labels to use in the user interface (required)
    locale: {
        ...locale_en_gb,
        ...plugin_crop_locale_en_gb,
        ...plugin_finetune_locale_en_gb,
        ...plugin_annotate_locale_en_gb,
        ...markup_editor_locale_en_gb,
    },
};
</script>

<div style="height:600px">
    <DokaImageEditor
        {...editorConfig}
        src="my-image.jpeg"
        imageCropAspectRatio={1}
    />
</div>

Next steps

With the editor set up, we can continue to configure the editor to our liking by adjusting the available configuration options