Photo Editor

import { Component, inject } from '@angular/core';
import type { ApplicationConfig } from '@angular/core';
import { ModalController, IonButton } from '@ionic/angular';
import { PhotoEditorProps, PhotoEditorResult, providePhotoEditor } from '@rdlabo/ionic-angular-photo-editor';
import { PhotoEditorPage } from '@rdlabo/ionic-angular-photo-editor/editor';
import { createTuiImageEditor } from '@rdlabo/ionic-angular-photo-editor/editor/tui';

export const appConfig: ApplicationConfig = {
  providers: [providePhotoEditor({ createImageEditor: createTuiImageEditor })],
};

@Component({
  selector: 'app-edit-photo',
  imports: [IonButton],
  template: `<ion-button type="button" (click)="openEditor()">Edit photo</ion-button>`,
})
export class EditPhotoPage {
  private readonly modalCtrl = inject(ModalController);

  async openEditor(): Promise<void> {
    const componentProps = {
      requireSquare: false,
      value: 'https://picsum.photos/200/300',
      toolbarColorScheme: 'dark',
      labels: {
        save: '送信', // override default '保存'
      },
    } satisfies PhotoEditorProps;
    const modal = await this.modalCtrl.create({
      component: PhotoEditorPage,
      componentProps,
    });
    await modal.present();
    const { data } = await modal.onWillDismiss<PhotoEditorResult>();
    if (data?.action === 'save') {
      console.log(data.value);
    }
  }
}

interface PhotoEditorResult {
  action: 'save';
  value: string; // data URL of the edited image
}