syncfusion-angular-image-editor

Syncfusion Angular Image Editor の実装

Syncfusion Angular Image Editor コンポーネントは、画像編集と注釈機能を備えた包括的で多機能なソリューションを提供します。開発者はこのコンポーネントを使って、プロフェッショナルな画像編集機能を Angular アプリケーションに直接組み込めます。注釈、変換、フィルターなど、幅広い編集操作に対応しています。

コンポーネントの概要

Image Editor は、次の機能を備えた強力なスタンドアロンコンポーネントです。

• 20 種類以上の組み込みツールを備えた、包括的な画像編集スイート
• テキスト、図形、フリーハンド描画に対応した柔軟な注釈システム
• 回転、反転、傾き補正、ズーム、パンなどの高度な変換機能
• プロフェッショナルな画像フィルター（コールド、ウォーム、クローム、セピア、反転、グレースケールなど）
• 明るさ、コントラスト、彩度、色相、露出、ぼかし、不透明度を微調整するコントロール
• 複数のフレームタイプとカスタマイズオプションを備えたフレームの適用
• プライバシー保護のための墨消しツール（ぼかしとピクセル化）
• ローカルファイル、base64、blob、ファイルアップローダー、ファイルマネージャーなど、複数の入出力オプション
• 充実した元に戻す／やり直し履歴（最大 16 ステップ）
• コンテキストオプションとクイックアクセスオプションを備えた、完全にカスタマイズ可能なツールバー
• 注釈のレイヤー順を管理する Z オーダー管理
• タッチジェスチャー（ピンチズーム）に対応した、モバイルフレンドリーな設計
• WCAG 2.2、キーボードナビゲーション、スクリーンリーダーとの互換性を含む、完全なアクセシビリティ対応
• 150 以上のローカライズキーワードに対応した多言語サポート

ドキュメントとナビゲーションガイド

はじめにとインストール

📄 参照先： references/getting-started.md

• インストールとパッケージのセットアップ
• 依存関係とモジュールのインポート
• 基本的なコンポーネントの実装
• CSS のインポートとテーマの設定
• 初回のレンダリングと初期化

注釈と描画

📄 参照先： references/annotations.md

• 書式設定（太字、斜体、下線、取り消し線）に対応したテキスト注釈
• 複数行のテキスト対応
• フォントファミリーとテキストの色のカスタマイズ
• 線の調整に対応したフリーハンド描画
• 図形の注釈（長方形、楕円、線、矢印、パス）
• 画像注釈と透かし
• 注釈の削除と管理
• 図形のスタイル設定と既定値のカスタマイズ

選択と切り抜き

📄 参照先： references/selection-and-cropping.md

• カスタム選択図形
• 正方形と円形の選択
• アスペクト比を指定した選択（2:3、3:2、4:3、16:9 など）
• 選択した領域の切り抜き
• 選択イベントの処理
• 選択領域のロック
• 切り抜き時のカスタム比率選択

画像変換

📄 参照先： references/transform.md

• 画像の回転（時計回り／反時計回り）
• 水平方向および垂直方向への反転
• 微調整による画像の傾き補正
• 最小／最大ズームレベルを設定した拡大／縮小
• パン機能とイベント
• 変換イベントハンドラー
• 変換用キーボードショートカット

フィルターと微調整

📄 参照先： references/filter-and-finetune.md

• 画像フィルターの適用（コールド、ウォーム、クローム、セピア、反転、グレースケール、白黒）
• 明るさとコントラストの微調整
• 彩度レベルの調整
• 色相の調整
• 露出の調整
• ぼかし効果
• 不透明度の調整
• フィルターと微調整のイベント処理

フレームの適用

📄 参照先： references/frames.md

• フレームタイプ（マット、ベベル、ライン、フック、インセット）
• フレームの色のカスタマイズ
• グラデーションカラーへの対応
• フレームサイズとオフセットの設定
• ラインタイプのフレームの角丸
• フレームの線種（実線、破線、点線）
• フレーム変更イベント

マスキングとプライバシー

📄 参照： references/redaction.md

• マスキングの描画（ぼかしとピクセル化の種類）
• マスキングのプロパティのカスタマイズ
• 特定のマスキングの選択
• マスキング設定の更新
• マスキングの削除
• マスキングの詳細の取得

開く・保存の操作

📄 参照： references/open-and-save.md

• 複数のソース（ローカル、base64、blob、アップローダー、ファイルマネージャー、ツリービュー）から画像を開く
• 形式（PNG、JPEG、SVG、WEBP、BMP）を選択して保存
• JPEG 形式の画質の調整
• 別の形式でのエクスポート
• base64、バイト配列、blob への変換
• 開く・保存する際のウォーターマークの適用
• カスタム保存ダイアログとサーバーへのアップロード
• カスタムサイズ用の画像設定

元に戻す・やり直す操作

📄 参照： references/undo-redo.md

• 元に戻す機能の実装
• やり直し機能の実装
• 履歴の制限（16 ステップ）の把握
• キーボードショートカット（Ctrl+Z、Ctrl+Y）

ツールバーのカスタマイズ

📄 参照： references/toolbar.md

• 組み込みツールバー項目とその機能
• カスタムツールバー項目の追加
• ツールバーの表示・非表示
• 特定の項目の有効化・無効化
• コンテキストに応じたツールバーのカスタマイズ
• 完全にカスタマイズできるツールバーテンプレート
• ツールバーイベント（toolbarCreated、toolbarItemClicked、toolbarUpdating）

クイックアクセスツールバー

📄 参照： references/quick-access-toolbar.md

• クイックアクセスツールバーの表示制御
• クイックアクセスツールバーへのカスタム項目の追加
• 注釈固有のアクションのカスタマイズ
• ツールバー操作のイベント処理

Z オーダーとレイヤー

📄 参照： references/z-order.md

• 注釈を前面に移動
• 注釈を背面に移動
• 注釈を最前面に移動
• 注釈を最背面に移動
• 複数の注釈レイヤーの管理

アクセシビリティとコンプライアンス

📄 参照： references/accessibility.md

• WCAG 2.2 準拠基準
• キーボードショートカットとナビゲーション
• スクリーンリーダーのサポート
• 色のコントラスト基準
• モバイルのアクセシビリティサポート
• RTL（右から左）サポート

API リファレンス

📄 参照： references/api.md

• 型とデフォルト値を含むプロパティの完全なリファレンス
• パラメーターと戻り値の型を含むすべてのメソッド
• 説明を含むすべてのイベント
• イベント引数のリファレンス
• フィルター、微調整、図形、フレームの各タイプ
• 選択図形とエクスポート形式
• プロパティとイベントの使用例

ローカライズ

📄 参照： references/localization.md

• ロケール設定の指定
• 複数言語での UI テキストのカスタマイズ
• 翻訳キーワードと値
• 国際的なユーザーへの対応

画像の制限と検証

📄 参照： references/image-restrictions.md

• 許可するファイル拡張子の指定
• ファイルサイズの最小制限の設定
• ファイルサイズの最大制限の設定
• 検証エラーメッセージ
• アップロード設定の構成

画像のサイズ変更

📄 参照： references/resize.md

• 画像サイズの変更
• アスペクト比の維持
• サイズ変更イベントの処理
• カスタムサイズの指定

エンドユーザー向け機能

📄 参照： references/end-user-capabilities.md

• ユーザー向けの機能とワークフロー
• UI から画像を開く
• ツールバー、ピンチ、マウスホイール、キーボードによるズーム操作
• パン機能
• ツールバーを使用した変換
• 注釈の作成と編集
• フィルターと微調整の適用
• 保存とエクスポートのワークフロー

ハウツーガイド

📄 読む： references/clear-image.md - ダイアログで再利用するためのエディター状態のクリア

📄 読む： references/fit-to-width-height.md - 動的なズーム調整

📄 読む： references/render-in-dialog.md - モーダルダイアログへの統合

📄 読む： references/reset-image.md - 元の状態への復元

クイックスタートの例

import { Component } from '@angular/core';
import { ImageEditorModule } from '@syncfusion/ej2-angular-image-editor';

@Component({
  imports: [ImageEditorModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div style="width: 550px; height: 350px;">
      <ejs-imageeditor 
        #imageEditor
        [toolbar]="['Open', 'Undo', 'Redo', 'Crop', 'Annotate', 'Finetune', 'Filter', 'Resize', 'Save', 'Reset']"
      ></ejs-imageeditor>
    </div>
    <button (click)="openImage()">Open Image</button>
  `
})
export class AppComponent {
  @ViewChild('imageEditor') imageEditor: any;

  openImage() {
    this.imageEditor.open('path-to-image.png');
  }

  addAnnotation() {
    this.imageEditor.drawText(50, 50, 'Sample Text', 'Arial', 12, false, false, '#000000');
  }

  rotateImage() {
    this.imageEditor.rotate(90);
  }

  saveImage() {
    this.imageEditor.export('edited-image', 'png');
  }
}

よくあるパターン

パターン 1：画像を開いて注釈を追加する

// Open image from file
this.imageEditor.open('image.png');

// Add text annotation
this.imageEditor.drawText(100, 100, 'Important', 'Arial', 16, true, false, '#FF0000');

// Add rectangle
this.imageEditor.drawRectangle(50, 50, 200, 150, 2, '#0000FF', '#FFFFFF');

// Add freehand drawing
this.imageEditor.freehandDraw();

パターン 2：フィルターの適用と微調整

// Apply filter
this.imageEditor.applyImageFilter('Sepia');

// Fine-tune brightness
this.imageEditor.finetuneImage('Brightness', 50);

// Fine-tune contrast
this.imageEditor.finetuneImage('Contrast', -30);

// Fine-tune saturation
this.imageEditor.finetuneImage('Saturation', 40);

パターン 3：切り抜きと変形

// Select region for cropping
this.imageEditor.select('Custom', 50, 50, 300, 200);

// Crop the selected region
this.imageEditor.crop();

// Rotate after cropping
this.imageEditor.rotate(90);

// Flip horizontally
this.imageEditor.flip('Horizontal');

パターン 4：ツールバーのカスタマイズ

toolbar: [
  'Open',
  'Undo',
  'Redo',
  'Crop',
  'RotateLeft',
  'RotateRight',
  'HorizontalFlip',
  'VerticalFlip',
  'Annotate',
  'Finetune',
  'Filter',
  'Frame',
  'Redact',
  'Resize',
  'Save',
  'Reset'
];

パターン 5：異なる形式で保存する

// Save as PNG (default)
this.imageEditor.export('myImage', 'png');

// Save as JPEG with quality
this.imageEditor.export('myImage', 'jpeg', 90);

// Get base64 data
const base64Data = this.imageEditor.getImageData();

// Save as blob
this.imageEditor.getImageData().then(data => {
  const blob = this.dataURLtoBlob(data);
  // Send to server
});

主なプロパティと設定

プロパティ	型	説明	使用する場面
toolbar	array	表示するツールバー項目のリスト	表示するツールをカスタマイズする
toolbarTemplate	template	ツールバー全体のカスタムテンプレート	ツールバーを全面的に再設計する
uploadSettings	object	ファイルの検証ルール（拡張子、サイズ）	アップロードできる形式やサイズを制限する
zoomSettings	object	ズーム倍率の最小値／最大値の設定	ズーム範囲を制御する
fontFamily	array	テキストに追加するフォントファミリー	カスタムフォントを追加する
locale	string	UI テキストの言語	多言語に対応する
height	string/number	コンポーネントの高さ	レイアウトのサイズ調整
width	string/number	コンポーネントの幅	レイアウトのサイズ調整
showQuickAccessToolbar	boolean	クイックアクセスツールバーを表示するかどうか	クイックツールバーの表示を制御する

よくあるユースケース

1. 写真編集アプリ - すべてのツールを備えた多機能画像エディター
2. ドキュメントへの注釈 - ドキュメントをハイライト表示し、マークやコメントを追加する
3. ソーシャルメディアコンテンツ - 画像にフィルター、フレーム、テキストを適用する
4. プライバシー保護 - 共有する前に機密情報をマスキングする
5. プロフィール画像エディター - アバターを切り抜き、回転し、フィルターを適用する
6. 不動産物件情報 - 物件写真を回転し、フレームや注釈を追加する
7. フィードバックとコラボレーション - チーム内のやり取りに使うスクリーンショットへ注釈を追加する
8. テンプレートデザイン - Z 順で注釈を重ね、カスタムレイアウトを作成する
9. フォーム用画像の撮影 - モバイルカメラで撮影した画像を切り抜き、回転し、最適化する
10. ウォーターマークの適用 - ブランド表示のためにテキストや画像のウォーターマークを追加する

リファレンスファイル

詳細なドキュメントはすべて、機能ごとに references/ フォルダーに整理されています。各リファレンスファイルは単独で利用でき、特定の機能を詳しく説明しています。

コード例、イベント処理、詳細な設定については、各リファレンスファイルを参照してください。