moddi3 / toast-ui-image-editor-angular-wrapper

A simple Angular6+ wrapper for TOAST UI Image Editor

Angular Wrapper for TOAST UI Image Editor

An Angular Component wrapping TOAST UI Image Editor.

Based with ❤️ on Toast UI Image Editor for Vue.

Installation

With npm

npm install --save ngx-tui-image-editor

If you install other packages, you may lose dependency on fabric. You need to reinstall the fabric.
sh npm install --no-save --no-optional fabric@~1.6.7

Use

Import the module

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { ToastUiImageEditorModule } from "toast-ui-image-editor";

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

Use the component

The image editor will default to 100% height and width of its container. So define the height and width you want on the wrapping element.

  <div style="height: 500px; width: 100%">
    <tui-image-editor></tui-image-editor>
  </div>

Inputs

options - object

Default:

{
  cssMaxWidth: 700,
  cssMaxHeight: 500
};

An options object passed directly to the Image Editor on initializaiton. For usage, reference the options parameter defined in the constructor in the TOAST UI Image Editor docs

Per TOAST UI Image Editor for Vue

TOAST UI ImageEditor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI ImageEditor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics option when creating the instance.

const options = {
    ...
    usageStatistics: false
}

includeUI - boolean

Default:

true

Use the UI provided by default.

Outputs

Eight outputs that correspond to the events in the TOAST UI Image Editor events docs

Accessing the editor directly.

The editor instance is a public variable on the component, and can be accessed directly using the Angular ViewChild property.

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { ToastUiImageEditorComponent } from 'toast-ui-image-editor';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  @ViewChild(ToastUiImageEditorComponent) editorComponent: ToastUiImageEditorComponent;

  ngAfterViewInit() {
    console.log(this.editorComponent.editorInstance);
  }
}