This is the archived documentation for Doka Image Editor v6.

Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.

Angular

Introduction

The Doka Angular adapter exposes three different components.

  • <lib-doka> useful for editing images on the page itself.
  • <lib-doka-modal> will open in a popover on top of the page.
  • <lib-doka-overlay> will render Doka on top of an image.

Each components accepts Doka src, options, and event attributes.

When the events are bound they are named exactly like the default Doka callback events. All th default instance properties can be defined in the options object.

This means that the JavaScript configuration below:

Doka.create({
    src: './my/image.jpeg',
    cropAspectRatio: 1,
    onconfirm: (output) => {
        console.log('Crop result', output);
    },
});

Is the same as this:

<lib-doka
    [src]="src"
    [options]="options"
    (onconfirm)="handleDokaConfirm($event)"
>
</lib-doka>

Where src, options and onconfirm are defined on the Component class like this.

export class DemoModalComponent {
    src: string = './my/image.jpeg';

    options: Object = {
        cropAspectRatio: 1,
    };

    handleDokaConfirm = ($event) => {
        console.log('Doka confirm button clicked', $event);
    };
}

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.

The <lib-doka> Component can be used to render Doka inline.

import { Component, ViewChild } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'demo-inline',
  template: `
    <h2>Doka Inline</h2>

    <lib-doka #myDoka
      style="height:400px"
      [src]="src"
      [options]="options"
      (oninit)="handleDokaInit()"
      (onconfirm)="handleDokaConfirm($event)"
      (oncancel)="handleDokaCancel()">
    </lib-doka>

    <img *ngIf="result" [src]="result" alt="" />
  `
})

export class DemoInlineComponent {

  constructor(private sanitizer:DomSanitizer) {}

  @ViewChild('myDoka', { static: false }) myDoka: any;

  // image source
  src: string = './assets/photo.jpeg';

  // image output
  result: SafeUrl = null;

  // doka configuration options
  options: Object = {
    utils: ['crop', 'filter', 'color', 'markup', 'resize'],
    cropAspectRatio: 1,
    cropAspectRatioOptions: [
      {
        label: 'Free',
        value: null
      },
      {
        label: 'Portrait',
        value: 1.5
      },
      {
        label: 'Square',
        value: 1
      },
      {
        label: 'Landscape',
        value: .75
      }
    ]
  }

  handleDokaInit = () => {
    console.log('Doka has initialised', this.myDoka);
  }

  handleDokaConfirm = ($event) => {
    console.log('Doka confirm button clicked', $event);
    const url = URL.createObjectURL($event.output.file);
    this.result = this.sanitizer.bypassSecurityTrustUrl(url);
  }

  handleDokaCancel = () => {
    console.log('Doka cancel button clicked');
  }
}

The <lib-doka-modal> component opens Doka in a popover on top of the current page.

import { Component, ViewChild } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'demo-modal',
  template: `
    <h2>Doka Modal</h2>

    <button (click)="handleShowModal()">Show Modal</button>

    <lib-doka-modal #myDoka
      *ngIf="enabled"
      [src]="src"
      [options]="options"
      (oninit)="handleDokaInit()"
      (onconfirm)="handleDokaConfirm($event)"
      (oncancel)="handleDokaCancel()"
      (onclose)="handleDokaClose()">
    </lib-doka-modal>

    <img *ngIf="result" [src]="result" alt="" />

  `
})

export class DemoModalComponent {

  constructor(private sanitizer:DomSanitizer) {}

  @ViewChild('myDoka', { static: false }) myDoka: any;

  // modal state
  enabled: boolean = false;

  // image source
  src: string = './assets/photo.jpeg';

  // image output
  result: SafeUrl = null;

  // doka configuration options
  options: Object = {
    cropAspectRatio: 1,
    cropAspectRatioOptions: [
      {
        label: 'Free',
        value: null
      },
      {
        label: 'Portrait',
        value: 1.5
      },
      {
        label: 'Square',
        value: 1
      },
      {
        label: 'Landscape',
        value: .75
      }
    ]
  }

  handleShowModal = () => {
    this.enabled = true;
  }

  handleDokaInit = () => {
    console.log('Doka has initialised', this.myDoka);
  }

  handleDokaConfirm = ($event) => {
    console.log('Doka confirm button clicked', $event);
    const url = URL.createObjectURL($event.output.file);

    this.result = this.sanitizer.bypassSecurityTrustUrl(url);
  }

  handleDokaCancel = () => {
    console.log('Doka cancel button clicked');
  }

  handleDokaClose = () => {
    this.enabled = false;
  }
}

The <lib-doka-overlay> component renders on top on another image. This is useful when editing an image in place.

import { Component, ViewChild } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'demo-preview',
  template: `
    <h2>Doka Overlay</h2>

    <button (click)="handleShowOverlay()">Show Overlay</button>

    <lib-doka-overlay #myDoka
      [enabled]="enabled"
      [src]="imageSrc"
      [options]="options"
      (oninit)="handleDokaInit()"
      (onconfirm)="handleDokaConfirm($event)"
      (oncancel)="handleDokaCancel()">
      <img [src]="imagePreviewSource" alt="" />
    </lib-doka-overlay>
  `
})

export class DemoPreviewComponent {

  constructor(private sanitizer:DomSanitizer) {}

  @ViewChild('myDoka', { static: false }) myDoka: any;

  // image preview settings
  imageSrc: string = './assets/photo.jpeg';
  imagePreviewSource: SafeUrl = './assets/photo-preview.jpeg';

  // overlay state
  enabled: boolean = false;

  // doka configuration options
  options: any = {
    crop: {
        aspectRatio: .5,
        rotation: -1.5707963268
    },
    utils: ['crop']
  }

  handleShowOverlay = () => {
    this.enabled = true;
  }

  handleDokaConfirm = ($event) => {
    console.log('Doka confirm button clicked', $event);

    this.enabled = false;
    const url = URL.createObjectURL($event.output.file);
    this.imagePreviewSource = this.sanitizer.bypassSecurityTrustUrl(url);
    this.options = {
        ...this.options,
        crop: {
          ...$event.output.data.crop
        }
    }
  }

  handleDokaInit = () => {
    console.log('Doka has initialised', this.myDoka);
  }

  handleDokaCancel = () => {
    console.log('Doka cancel button clicked');
  }

}