syncfusion-react-image-editor

Syncfusion React Image Editor の実装

Syncfusion React Image Editor は、React アプリケーション内で画像を直接編集できる、包括的で機能豊富なコンポーネントです。変形、注釈、エフェクトなどのための強力なツールを備えた、直感的なインターフェイスを提供します。

コンポーネントの概要

Image Editor は、キャンバスベースの編集環境に、包括的なツールバーとコンテキストツールを組み合わせています。次の機能をサポートしています。

• 複数の入力ソース： ファイル、URL、base64、Blob、ファイルマネージャー、ツリービュー
• 豊富な注釈機能： テキスト（スタイル設定付き）、図形、フリーハンド描画、透かし
• プロフェッショナルなエフェクト： フィルターと微調整コントロール
• 高度な操作： Z オーダーの管理、墨消し、フレーム装飾
• アクセシビリティを最優先： 完全なキーボードナビゲーション、WCAG 準拠、RTL サポート、120 以上のローカライズキー
• 柔軟な統合： 単体での使用、またはダイアログ内での使用に対応し、ツールバーをカスタマイズ可能

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

🔹 API リファレンス

📄 参照先： references/api.md

• すべてのプロパティ、メソッド、イベントを網羅した完全な API ドキュメント
• プロパティの概要（コア、ツールバー、設定）
• 画像操作、変形、注釈のためのメソッド
• ライフサイクル、操作、エフェクト、ツールバーのイベント
• 列挙型と型定義（ArrowheadType、FrameType、RedactType など）
• 検証済みのメソッドシグネチャを使用した、完全な動作例

はじめに

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

• Vite および create-react-app を使用したインストール
• CSS のインポートとテーマの設定
• コンポーネントの基本的な初期化
• 幅、高さ、初回レンダリングの設定

画像を開く・保存する

📄 参照先： references/opening-saving-images.md

• ファイルパス、URL、base64 文字列、Blob から画像を開く
• ファイルアップローダー、ファイルマネージャー、ツリービューから画像を開く
• PNG、JPEG、SVG、WEBP 形式で保存／エクスポートする
• 画像の寸法とアスペクト比の制御
• ファイルを開く、保存する際のイベントとライフサイクルイベント

選択とトリミング

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

• カスタム、正方形、円形の選択範囲を挿入する
• アスペクト比（2:3、3:2、3:4、4:3、4:5、5:4、5:7、7:5、9:16、16:9）でトリミングする
• トリミングメソッドと選択イベント
• トリミング中に元の画像サイズを維持する
• サイズ変更中に選択領域をロックする

変形：回転、反転、傾き補正

📄 参照先： references/transform-rotate-flip.md

• 度数を指定して時計回り／反時計回りに回転する
• 水平方向および垂直方向に反転する
• 度数を細かく調整（-45° ～ +45°）して画像の傾きを補正する
• 画像と一緒に注釈も変形する
• 回転および反転のイベント

ズームとパン操作

📄 参照先： references/zooming-panning.md

• 設定可能な最小／最大倍率で拡大／縮小する
• ズーム中、またはトリミング中にパンする
• ズームのトリガー（ツールバー、ピンチ、マウスホイール、キーボード）
• ズームおよびパンのイベント
• ズームポイントの計算

テキスト注釈

📄 参照先： references/text-annotations.md

• 位置、内容、フォント設定を指定してテキストを追加する
• テキストのスタイル設定（太字、斜体、下線、取り消し線）
• フォントファミリー、サイズ、色
• 改行文字を使った複数行テキスト
• テキスト注釈を削除する
• shapeChanging イベントを使ってフォント色をカスタマイズする

フリーハンド描画

📄 参照先： references/freehand-drawing.md

• フリーハンド描画モードを有効／無効にする
• 線の太さと色をカスタマイズする
• フリーハンド注釈を削除する
• shapeChanging イベントを使って描画中に線を調整する

形状の注釈

📄 読む： references/shape-annotations.md

• 長方形、楕円、線、矢印、パスを描画します
• 線の色、線幅、塗りつぶし色で図形をカスタマイズします
• 度数パラメーターで図形を回転します
• 図形の注釈を削除します
• デフォルトの線の色をカスタマイズします
• 図形の変更とカスタマイズのイベント

画像の注釈

📄 読む： references/image-annotations.md

• 画像やアイコンを注釈として追加します
• 位置、サイズ、回転、不透明度を調整します
• アスペクト比を保持します
• 透かしや装飾要素

フィルター

📄 読む： references/filters.md

• 定義済みフィルター（Chrome、Cold、Warm、Grayscale、Sepia、Invert）を適用します
• 画像フィルタリングイベント
• フィルターを元の状態にリセットします

微調整

📄 読む： references/finetune.md

• 明るさ、コントラスト、彩度を調整します
• 色相、露出、ぼかし、不透明度を調整します
• 微調整値の変更イベント
• スライダーでリアルタイムに調整します

元に戻す／やり直す

📄 読む： references/undo-redo.md

• 16 ステップの履歴で操作を元に戻す／やり直します
• キーボードショートカット（Ctrl+Z、Ctrl+Y）
• 履歴の管理と制限

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

📄 読む： references/toolbar-customization.md

• 組み込みのツールバー項目（デフォルトのツール 20 種類以上）
• ツールバー項目の追加、削除、有効化、無効化
• イベントハンドラーを備えたカスタムツールバー項目
• 注釈用のコンテキストツールバー
• 全面的にカスタマイズできるツールバーテンプレート
• ツールバーの作成と項目のクリックイベント

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

📄 読む： references/quick-access-toolbar.md

• 注釈用のクイックアクセスツールバー
• クイックアクセスツールバーの表示／非表示
• クイックアクセスツールバーにカスタム項目を追加します
• クイックアクセスツールバーのオープンイベント

画像のサイズ変更

📄 読む： references/resize-image.md

• アスペクト比を維持する場合と維持しない場合のサイズ変更
• 幅と高さのパラメーター
• 変更前後の寸法を伴うサイズ変更イベント

フレームの装飾

📄 読む： references/frame-decoration.md

• フレーム（Mat、Bevel、Line、Inset、Hook）を適用します
• フレームの色、サイズ、線のスタイルをカスタマイズします
• フレーム変更イベント

Z オーダーのレイヤー化

📄 読む： references/z-order-layering.md

• 注釈を前面へ移動／背面へ移動します
• 最前面へ移動／最背面へ移動します
• 注釈のレイヤー順序を管理します

機密情報の墨消し

📄 読む： references/redact-sensitive-info.md

• 機密情報を含む領域をぼかします
• 機密情報を含む領域をピクセル化します
• 墨消しの CRUD 操作（選択、更新、削除、取得）
• プライバシーとコンプライアンス

アクセシビリティとローカライズ

📄 読む： references/accessibility-localization.md

• WCAG 2.2、Section 508 に準拠
• スクリーンリーダーをサポート
• キーボードショートカット（Ctrl+Z、Ctrl+S、Ctrl+O、Delete、Enter、Escape）
• RTL 言語をサポート
• 120 個以上のロケールキーによるローカライズ

画像の制限と検証

📄 読む： references/image-restrictions-validation.md

• 許可されるファイル拡張子（.jpg、.png、.svg、.webp、.bmp）
• ファイルサイズの最小値と最大値の制限
• ファイルの検証とエラー通知

画像のクリア

📄 読む： references/clear-image.md

• エディターの状態をクリアします
• ダイアログを再利用するパターン
• 以前に読み込んだ画像を削除します

幅と高さに合わせる

📄 読む： references/fit-width-height.md

• 画像をエディターコンテナーの幅に合わせます
• 画像をエディターコンテナーの高さに合わせます
• 完全にフィットさせるズーム計算

ダイアログにレンダリング

📄 読む： references/render-in-dialog.md

• ダイアログコンポーネント内に画像エディターをレンダリングします
• コンテンツテンプレートとの統合
• ダイアログの表示／非表示パターン

画像をリセット

📄 参照： references/reset-image.md

• すべての変更を元の状態にリセットします
• 変更前の状態に戻します
• 注釈とエフェクトをクリアします

クイックスタートの例

import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import React from 'react';

function App() {
  let imgObj: ImageEditorComponent;

  function imageEditorCreated(): void {
    imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/bridge.jpeg');
  }

  return (
    <div>
      <ImageEditorComponent
        ref={(img) => { imgObj = img }}
        width="550px"
        height="350px"
        created={imageEditorCreated}
      />
    </div>
  );
}

export default App;

よく使われるパターン

パターン 1：開く＋編集＋保存のワークフロー

1. open() メソッドで画像を開きます
2. 変換、注釈、またはエフェクトを適用します
3. export() を使って PNG／JPEG／SVG／WEBP として保存します
4. 必要に応じて、バックエンドで保存するために base64 または blob に変換します

パターン 2：レスポンシブなツールバー

1. toolbar プロパティでカスタムのツールバー項目を定義します
2. toolbarItemClicked イベントでクリックを処理します
3. クリックされた項目に応じて rotate()、zoom()、drawText() などのメソッドを実行します
4. toolbarUpdating イベントでコンテキストツールバーを更新します

パターン 3：注釈のワークフロー

1. 注釈モード（フリーハンド、テキスト、図形）を有効にします
2. shapeChanging イベントで色、線、フォントなどをカスタマイズします
3. 図形 ID を指定して deleteShape() で削除します
4. z-order メソッドでレイヤーを管理します

パターン 4：ダイアログとの連携

1. ダイアログの content テンプレートに画像エディターを表示します
2. fileOpened イベントでダイアログを開いたときに画像を読み込みます
3. ダイアログを閉じる前に clearImage() を呼び出します
4. export() または getImageData() で編集済みの画像データを取得します

パターン 5：フィルター＋微調整のパイプライン

1. applyImageFilter() でフィルターを適用します
2. finetuneImage() で微調整します（明るさ、コントラストなど）
3. imageFiltering および finetuneValueChanging イベントを監視します
4. エフェクトを組み合わせて、プロフェッショナルな仕上がりにします

主なプロパティ

プロパティ	型	目的
width	string	エディターキャンバスの幅（例：「550px」、「100%」）
height	string	エディターキャンバスの高さ（例：「350px」、「100%」）
toolbar	array	ツールバー項目と表示／非表示をカスタマイズします
fontFamily	object	カスタムフォントファミリーを追加します
uploadSettings	object	ファイルの制限（拡張子、サイズ）を設定します
zoomSettings	object	ズーム倍率の最小値／最大値を設定します
showQuickAccessToolbar	boolean	クイックアクセスツールバーを表示／非表示にします
locale	string	ローカライズを設定します（例：'de-DE'）

主なイベント

イベント	発生タイミング	使用例
created	コンポーネントの初期化時	起動時に画像を読み込みます
fileOpened	画像の読み込み時	透かしを追加し、デフォルト設定を適用します
beforeSave	エクスポート前	検証し、メタデータを追加します
cropping	トリミング中	拡大縮小を防ぎ、寸法を固定します
zooming	ズーム中	ズームレベルを検証します
rotating	回転中	回転角度を追跡します
shapeChanging	注釈の変更時	線やフォントをカスタマイズします
toolbarUpdating	ツールバーの表示時	コンテキスト項目を追加／削除します

対応ファイル形式

開く： PNG、JPEG、JPG、SVG、WEBP、BMP（ローカル、URL、base64、blob） 保存／エクスポート： PNG、JPEG、SVG、WEBP

次のステップ

• セットアップについては getting-started.md から始めてください
• データフローについては opening-saving-images.md を確認してください
• 各機能については、対応する専用のリファレンスファイルを参照してください
• 多言語対応には accessibility-localization.md を使用してください