Ionic Angularで簡単に写真加工機能を実装しよう

InstagramやFacebook、Xでも写真加工機能があるため、最近はモバイルアプリのみならずWebアプリでも写真加工できるのは随分当たり前になってきました。

しかし実際のところ、ブラウザでやろうと思うと、自力で実装するのは、画像処理の知識が必要になるというか、Canvasとの辛い戦いが待っています。ならばライブラリを使おうと思ったら、とても人気がありまたちゃんと作り込まれているのはTUI Image Editorなのですが、デスクトップもモバイルもデフォルトのUIはアプリに雰囲気をあわせるのは少しむずかしいデザインをしています。

◯ デスクトップのUIデザイン
https://nhn.github.io/tui.image-editor/latest/examples/example01-includeUi.html

◯ モバイルのUIデザイン
https://nhn.github.io/tui.image-editor/latest/examples/example03-mobile.html

そこで、TUI Image EditorのAPIを使って、Ionic Angularですぐに導入できる簡単な写真加工ライブラリをリリースしました。

デモ

https://rdlabo-ionic-angular-library.netlify.app/main/photo-editor

ビューアーもついていますが、まず「Launch Photo Editor」をタップして挙動をみてみてください。フリー素材を適当に引っ張ってきてるので少し起動に時間がかかりますが、以下のように「切り抜き、回転」「フィルター」「明るさ」の機能を現在実装しています。

使い方

Ionic Angularのプロジェクトでまずインストールしてください。

% npm install @rdlabo/ionic-angular-photo-editor 

そして、グローバルスタイルに以下を当ててください。

:root {
  --ion-photo-editor-background: #2a2a2a;
  --ion-photo-editor-background-tint: #414141;

  --ion-photo-editor-color: #f0f0f0;
  --ion-photo-editor-color-tint: #dbdbdb;

  --ion-photo-editor-primary: #4d8dff;
  --ion-photo-editor-danger: #f24c58;
  --ion-photo-editor-success: #2dd55b;
}

現在のスタイルはCSS変数なので、これを変更することで、デザインを変更できます。使い方はとても簡単で、IonicのModalを立ち上げる時に、 ComponentProps で写真情報（URLもしくはBase64）を渡すだけです。

import { PhotoEditorPage, IPhotoEditorDismiss } from '@rdlabo/ionic-angular-photo-editor';

(async () => {
  const modal = await this.modalCtrl.create({
    component: PhotoEditorPage,
    componentProps: {
      requireSquare: false,
      value: 'https://picsum.photos/200/300',
      label: {
        save: '送信', // change '保存' to '送信'
      },
    },
  });
  await modal.present();
  const { data } = await modal.onWillDismiss<IPhotoEditorDismiss>();
  if (data?.value) {
    console.log(data.value);
  }
})();

requireSquere を true にすると、写真を正方形に切り抜くことが必須になります。また、 label はボタンのラベルを変更できます。 詳しくは https://github.com/rdlabo-team/ionic-angular-library/tree/main/projects/photo-editor をご覧ください。

まとめ

このライブラリ自体は、私がリリースしているアプリで採用しており、安定的に動いてるものです。逆にOSSとして作り込んでリリースしたわけではないので、機能が限られる部分はありますが、写真加工をまずアプリに導入してみたい、もしくは写真加工機能をいれたいのでそういったライブラリのソースコードをみてみたいという方には、参考になるかと思います。

それではまた。