syncfusion-blazor-image-editor

Syncfusion Blazor Image Editor コンポーネントの実装

Syncfusion Blazor Image Editor は、Blazor アプリケーションに画像編集機能を組み込むための、強力で機能豊富なコンポーネントです。直感的な UI と充実した API を備え、画像の加工、注釈、変換、エクスポートに必要なツール一式を提供します。

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• NuGet パッケージ（Syncfusion.Blazor.ImageEditor、Syncfusion.Blazor.Themes）のインストール
• Blazor WebAssembly と Web App のセットアップ
• 名前空間のインポートとサービスの登録
• スタイルシートとスクリプトの参照の追加
• 基本コンポーネントのレンダリング
• NEW: コンポーネントのプロパティ（AllowUndoRedo、IsReadOnly、Enabled、Theme、CssClass、EnableImageSmoothing）

基本操作

📄 参照: references/core-operations.md

• ファイルエクスプローラーから画像を開く／読み込む
• NEW: 6 つのパラメーターすべてを含む OpenAsync の完全なシグネチャ（resetChanges、fillColor、width、height、isAspectRatio）
• 画像の保存とエクスポート（PNG、JPEG、SVG、WEBP 形式）
• JPEG エクスポート時の画質設定
• キーボードショートカットを使った元に戻す／やり直す操作（CanUndoAsync、CanRedoAsync）
• 画像を元の状態にリセット
• NEW: 変更の適用と破棄、画像のクリア、画像データの取得メソッド

画像変換

📄 参照: references/image-transformations.md

• カスタム、円形、正方形、または比率を指定した選択範囲で画像を切り抜く
• 左右への回転と任意の角度での回転
• 水平方向と垂直方向への反転
• スライダーで画像を傾き補正
• NEW: 角度を正確に調整する StraightenImageAsync メソッド（-45～+45 度）
• 画像を指定したサイズに変更
• キャンバス内で画像をパン

注釈

📄 参照: references/annotations.md

• テキスト注釈を追加し、フォント、サイズ、色、太字、斜体、下線、取り消し線を設定
• NEW: 下線と取り消し線のパラメーターを含む DrawTextAsync の完全な説明
• 複数行のテキスト注釈を作成
• 線の設定を指定してフリーハンド描画を有効化
• 図形（長方形、楕円、矢印、パス、線）を描画
• 画像注釈（透かし、ロゴ、装飾要素）を挿入
• NEW: 注釈の z-order 管理（BringToFrontAsync、SendToBackAsync、BringForwardAsync、SendBackwardAsync）
• NEW: CloneShapeAsync で注釈を複製
• NEW: 注釈モードの有効化／無効化（EnableActiveAnnotationAsync、DisableActiveAnnotationAsync）
• NEW: テキスト編集モードを有効化
• ShapeSettings と ID を使った注釈の削除と管理

注釈のスタイル設定

📄 参照: references/annotation-styling.md

• 線の幅、色、塗りつぶし色をカスタマイズ
• テキスト注釈にフォントスタイルを適用
• ShapeChanging イベントで動的にカスタマイズ
• 既定の線の色とスタイルを設定
• ShapeSettings のプロパティを操作

調整、フィルター、効果

📄 参照: references/adjustments-filters-effects.md

• 画像を細かく調整（明るさ、コントラスト、彩度、色相、ぼかしなど）
• スライダーを使って調整内容をプレビュー
• 画像にフィルター（定義済みの効果）を適用
• 画像にフレーム効果を追加
• 変更を確定する前に適用またはプレビュー

マスキング

📄 参照: references/redaction.md NEW

• ぼかしまたはピクセル化効果を使ってマスキングを描画
• RedactType 列挙型（Blur、Pixelate）
• ぼかしの強さとピクセルサイズを調整
• マスキングの取得、選択、更新、削除
• RedactSettings クラスのプロパティ
• プライバシー保護と GDPR 準拠のユースケース

フレーム

📄 参照： references/frames.md NEW

• 画像に装飾フレームを適用します
• FrameType 列挙型（Mat、Bevel、Line、Inset、Hook）
• フレームの色、グラデーション、サイズをカスタマイズします
• Line フレームの FrameLineStyle（Solid、Dashed、Dotted）
• インセット、オフセット、境界線の半径、線の数を設定します
• プロフェッショナルな写真の表示例

イベントリファレンス

📄 参照： references/events-reference.md NEW

• ImageEditorEvents の完全なドキュメント
• ライフサイクルイベント（Created、Destroyed）
• ファイル操作イベント（FileOpened、Saving）
• 変換イベント（Cropping/Cropped、Rotating/Rotated、Flipping/Flipped）
• 図形イベント（ShapeChanging/ShapeChanged、サイズ変更／ドラッグの開始／終了）
• 調整イベント（ImageFiltering/Filtered、FinetuneValueChanging/Changed、FrameChanging/Changed）
• ユーザー操作イベント（Zooming/Zoomed、OnPanStart/End、Clicked）
• ツールバーイベント（ToolbarUpdating、ToolbarItemClicked、QuickAccessToolbarOpening）
• 履歴イベント（HistoryChanged）
• すべてのイベントのイベント引数リファレンス

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

📄 参照： references/toolbar-customization.md

• 組み込みツールバー項目（Open、Crop、Rotate、Annotation、Filters など）のリファレンス
• カスタムツールバー項目とボタンを追加します
• ツールバー全体または特定の項目を表示／非表示にします
• 条件に応じてツールバー項目を有効／無効にします
• ToolbarUpdating イベントを使用してコンテキストツールバーをカスタマイズします
• カスタムツールバーテンプレートを作成します

ユーザー操作

📄 参照： references/user-interactions.md

• ズーム方法（ツールバーボタン、ピンチジェスチャー、マウスホイール、キーボードショートカット）
• キャンバス上で画像をパン／移動します
• 切り抜きの選択タイプ
• 画像の寸法と座標を取得します
• キーボードショートカットのリファレンス（Ctrl+Z、Ctrl+Y、Ctrl+S など）

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

📄 参照： references/accessibility-localization.md

• WCAG 準拠とアクセシビリティ機能
• キーボードナビゲーションのサポート
• スクリーンリーダーとの互換性
• ARIA 属性
• 色のコントラスト基準
• ローカライズと RTL のサポート

セットアップモードとデプロイ

📄 参照： references/setup-modes.md

• WebAssembly アプリのセットアップ（Visual Studio、VS Code、.NET CLI）
• インタラクティブなレンダリングモード（Auto、WebAssembly、Server）を使用する Web アプリのセットアップ
• テーマの設定（Bootstrap5、Fluent2、Material3、Tailwind3）
• 静的 Web アセットと CDN の参照
• スクリプトの参照と依存関係

クイックスタートの例

@using Syncfusion.Blazor.ImageEditor

<SfImageEditor @ref="ImageEditor" Height="500px" Width="100%">
    <ImageEditorEvents Created="OnCreated"></ImageEditorEvents>
</SfImageEditor>

@code {
    SfImageEditor ImageEditor;

    private async void OnCreated()
    {
        // Load an image when component is ready
        await ImageEditor.OpenAsync("path/to/image.png");
    }
}

セットアップ手順：

1. NuGet パッケージ Syncfusion.Blazor.ImageEditor と Syncfusion.Blazor.Themes をインストールします
2. _Imports.razor にインポートを追加します：@using Syncfusion.Blazor.ImageEditor
3. Program.cs にサービスを登録します：builder.Services.AddSyncfusionBlazor();
4. テーマのスタイルシートを index.html または App.razor に追加します
5. コンポーネントを追加し、Created イベントで画像を読み込みます

主な機能

機能	目的	参照
画像の読み込み	JPEG、PNG、JPG、WEBP、BMP ファイルを開きます	core-operations.md
テキスト注釈	下線／取り消し線付きのラベル、キャプション、透かしを追加します	annotations.md
図形注釈	描画順序を制御しながら、四角形、楕円、矢印、パスを描画します	annotations.md
フリーハンド描画	画像に直接スケッチや描画を行います	annotations.md
墨消し	プライバシーコンプライアンスのため、ぼかしやピクセル化で機密情報を隠します	redaction.md
フレーム	装飾的な境界線（Mat、Bevel、Line、Inset、Hook）を適用します	frames.md
切り抜きと変形	複数の選択方法で切り抜き、回転、反転、傾きを補正します	image-transformations.md
フィルターとエフェクト	微調整や定義済みフィルターを適用します	adjustments-filters-effects.md
ズームとパン	複数のズーム方法と画像のパン操作を利用できます	user-interactions.md
エクスポート	画質を調整して PNG、JPEG、SVG、WEBP として保存します	core-operations.md
元に戻す／やり直す	操作の完全な履歴を利用できます	core-operations.md
イベント	ライフサイクル、変形、図形、操作に関する 30 種類以上のイベント	events-reference.md
ツールバー	イベントに対応した組み込みまたはカスタムのツールバー	toolbar-customization.md
アクセシビリティ	キーボード操作、スクリーンリーダー、RTL、ローカライズ	accessibility-localization.md

よく使われるパターン

パターン 1：画像を読み込んで注釈を有効にする

<SfImageEditor @ref="ImageEditor" Height="500px">
    <ImageEditorEvents Created="OnCreated"></ImageEditorEvents>
</SfImageEditor>

@code {
    SfImageEditor ImageEditor;
    private string ImageUrl = "YOUR_IMAGE_URL"; 
    
    private async void OnCreated()
    {
        await ImageEditor.OpenAsync(ImageUrl);
    }
    
    private async Task AddTextAnnotation()
    {
        ImageDimension dim = await ImageEditor.GetImageDimensionAsync();
        await ImageEditor.DrawTextAsync(dim.X.Value, dim.Y.Value, "Important", "Arial", 24);
    }
}

パターン 2：カスタムツールバー

<SfImageEditor @ref="ImageEditor" Toolbar="@CustomToolbar" Height="500px">
    <ImageEditorEvents Created="OnCreated" ToolbarItemClicked="OnToolbarClick"></ImageEditorEvents>
</SfImageEditor>

@code {
    private List<ImageEditorToolbarItemModel> CustomToolbar = new()
    {
        new ImageEditorToolbarItemModel { Name = "Open" },
        new ImageEditorToolbarItemModel { Name = "Crop" },
        new ImageEditorToolbarItemModel { Name = "Annotation" },
        new ImageEditorToolbarItemModel { Name = "Save" }
    };
}

パターン 3：画質を調整して画像をエクスポートする

private async Task ExportImage()
{
    // Export as PNG (lossless, default)
    await ImageEditor.ExportAsync("edited-image.png");
    
    // Export as JPEG with quality control (0.0 to 1.0)
    await ImageEditor.ExportAsync("photo.jpg", ImageEditorFileType.JPEG, 0.85);
    
    // Export as WEBP (modern format)
    await ImageEditor.ExportAsync("image.webp", ImageEditorFileType.WEBP);
    
    // Export as SVG (vector format)
    await ImageEditor.ExportAsync("graphic.svg", ImageEditorFileType.SVG);
    
    // Or press Ctrl+S to open export dialog with format selection
}

パターン 4：プライバシー保護のための墨消しワークフロー

<SfImageEditor @ref="ImageEditor" Height="500px">
    <ImageEditorEvents Created="OnCreated"></ImageEditorEvents>
</SfImageEditor>

@code {
    SfImageEditor ImageEditor;
    
    private async Task RedactSensitiveInfo()
    {
        // Draw blur redaction over sensitive areas
        await ImageEditor.DrawRedactAsync(
            RedactType.Blur, 
            startX: 100, startY: 100,
            width: 200, height: 50,
            value: 30  // Blur intensity
        );
        
        // Draw pixelate redaction over other areas
        await ImageEditor.DrawRedactAsync(
            RedactType.Pixelate,
            startX: 400, startY: 200,
            width: 200, height: 50,
            value: 20  // Pixel size
        );
        
        // Export redacted image
        await ImageEditor.ExportAsync("redacted-document.png");
    }
}

パターン 5：プロ仕様の写真フレーム

<SfImageEditor @ref="ImageEditor" Height="500px">
    <ImageEditorEvents Created="OnCreated"></ImageEditorEvents>
</SfImageEditor>

@code {
    SfImageEditor ImageEditor;
    
    private async Task ApplyPhotoFrame()
    {
        // Load portrait image
        await ImageEditor.OpenAsync("portrait.jpg");
        
        // Apply classic mat frame with gradient
        await ImageEditor.DrawFrameAsync(
            FrameType.Mat,
            color: "#FFFFFF",
            gradientColor: "#F5F5DC",
            size: 50,
            inset: 20
        );
        
        // Export framed image
        await ImageEditor.ExportAsync("framed-portrait.png");
    }
}

関連スキル

• Blazor コンポーネントの実装 - メインライブラリの概要
• カルーセルの実装 - 画像カルーセルの表示
• リッチテキストエディターの実装 - テキスト編集機能

---

注： コード例ではすべて Blazor コンポーネントの構文を使用しています。ご利用の Blazor ホスティングモデル（WebAssembly、Web App、Server）に固有のセットアップ手順については、Getting Started ガイドを参照してください。