Setting up Doka Image Editor with Angular

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

• Installation on Angular 9 and up
• Installation on Angular 8 and below
• Using the components

Installation on Angular versions 9 and up

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

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

Please add the path to the Doka Image Editor styles 'local_modules/doka/doka.css' to the build/options/styles array in your angular.json configuration file.

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "angular": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.css",
                            "local_modules/doka/doka.css"
                        ]
                    }
                }
            }
        }
    }
}

Installation on Angular versions 8 and lower

We can install doka and angular-viewengine-doka by copying both folders to a local_modules folder in the Angular project roo.

Please add the path to the Doka Image Editor styles 'local_modules/doka/doka.css' to the build/options/styles array in your angular.json configuration file.

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "angular": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.css",
                            "local_modules/doka/doka.css"
                        ]
                    }
                }
            }
        }
    }
}

Using the components

Now we can import the modules like we normally would and use the Angular <doka-image-editor>, <doka-image-editor-modal>, and <doka-image-editor-overlay> components.

Events and properties

To bind events we can use the Angular event binding syntax.

<doka-image-editor (load)="onLoadImage($event)"></doka-image-editor>

Properties can be used as we would with the normal JavaScript version of the editor but should be assigned to the options attribute. Only src can be supplied with a separate attribute.

<doka-image-editor
    [src]="my-image.jpeg"
    [options]="myOptions"
></doka-image-editor>

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.

<!-- app.component.html -->
<div>
    <div style="height: 600px">
        <doka-image-editor [src]="src" [options]="options"></doka-image-editor>
    </div>
</div>

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// import AngularDokaModule
import { AngularDokaModule } from 'angular-doka';
// For Angular version 8 and below use the following import statement instead.
// import { AngularDokaModule } from '../../local_modules/angular-doka/angular-doka.module';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularDokaModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

// app.component.ts
import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private sanitizer: DomSanitizer) {}

    // The source image to load
    src: SafeUrl = 'assets/my-image.jpeg';

    // Our editor configuration
    options: any = {
        // Pass the editor default configuration options
        ...getEditorDefaults(),

        // This will set a square crop aspect ratio
        imageCropAspectRatio: 1
    }
}

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.

<!-- app.component.html -->
<div>
    <div style="height: 600px">
        <doka-image-editor [src]="src" [options]="options"></doka-image-editor>
    </div>
</div>

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// import AngularDokaModule
import { AngularDokaModule } from 'angular-doka';
// For Angular version 8 and below use the following import statement instead.
// import { AngularDokaModule } from '../../local_modules/angular-doka/angular-doka.module';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularDokaModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

// app.component.ts
import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

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

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private sanitizer: DomSanitizer) {}

    // The source image to load
    src: SafeUrl = 'assets/my-image.jpeg';

    // Our editor configuration
    options: any = {

        // 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,

        // This will set a square crop aspect ratio
        imageCropAspectRatio: 1,

        // 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,
        },
    }
}

Next steps

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