Implementing the Syncfusion Blazor Image Editor Component

The Syncfusion Blazor Image Editor is a powerful, feature-rich component for building image editing capabilities into your Blazor applications. It provides a complete toolkit for image manipulation, annotation, transformation, and export with an intuitive UI and extensive API.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation of NuGet packages (Syncfusion.Blazor.ImageEditor, Syncfusion.Blazor.Themes)
• Blazor WebAssembly and Web App setup
• Import namespaces and register services
• Add stylesheet and script references
• Render the basic component
• NEW: Component properties (AllowUndoRedo, IsReadOnly, Enabled, Theme, CssClass, EnableImageSmoothing)

Core Operations

📄 Read: references/core-operations.md

• Open/load images from file explorer
• NEW: Complete OpenAsync signature with all 6 parameters (resetChanges, fillColor, width, height, isAspectRatio)
• Save and export images (PNG, JPEG, SVG, WEBP formats)
• Image quality settings for JPEG export
• Undo and redo operations with keyboard shortcuts (CanUndoAsync, CanRedoAsync)
• Reset image to original state
• NEW: Apply and Discard changes, Clear image, Get image data methods

Image Transformations

📄 Read: references/image-transformations.md

• Crop images with custom, circle, square, or ratio selections
• Rotate left, right, and arbitrary angles
• Flip horizontally and vertically
• Straighten images with slider control
• NEW: StraightenImageAsync method for precise angle adjustment (-45 to +45 degrees)
• Resize images to specific dimensions
• Pan images within the canvas

Annotations

📄 Read: references/annotations.md

• Add text annotations with customization (font, size, color, bold, italic, underline, strikethrough)
• NEW: Complete DrawTextAsync with underline and strikethrough parameters
• Create multiline text annotations
• Enable freehand drawing with stroke control
• Draw shapes (rectangles, ellipses, arrows, paths, lines)
• Insert image annotations (watermarks, logos, decorative elements)
• NEW: Annotation z-order management (BringToFrontAsync, SendToBackAsync, BringForwardAsync, SendBackwardAsync)
• NEW: Clone annotations with CloneShapeAsync
• NEW: Enable/disable annotation modes (EnableActiveAnnotationAsync, DisableActiveAnnotationAsync)
• NEW: Enable text editing mode
• Delete and manage annotations using ShapeSettings and IDs

Annotation Styling

📄 Read: references/annotation-styling.md

• Customize stroke width, color, and fill colors
• Apply font styling for text annotations
• Use ShapeChanging event for dynamic customization
• Configure default stroke colors and styles
• Work with ShapeSettings properties

Adjustments, Filters & Effects

📄 Read: references/adjustments-filters-effects.md

• Apply fine-tuning adjustments (brightness, contrast, saturation, hue, blur, etc.)
• Use slider controls for adjustment preview
• Apply filters to images (predefined effects)
• Add frame effects to images
• Commit or preview changes before applying

Redaction

📄 Read: references/redaction.md NEW

• Draw redactions with blur or pixelate effects
• RedactType enum (Blur, Pixelate)
• Control blur intensity and pixel size
• Get, select, update, and delete redactions
• RedactSettings class properties
• Privacy protection and GDPR compliance use cases

Frames

📄 Read: references/frames.md NEW

• Apply decorative frames to images
• FrameType enum (Mat, Bevel, Line, Inset, Hook)
• Customize frame colors, gradients, sizes
• FrameLineStyle for Line frames (Solid, Dashed, Dotted)
• Configure inset, offset, border radius, and line count
• Professional photo presentation examples

Events Reference

📄 Read: references/events-reference.md NEW

• Complete ImageEditorEvents documentation
• Lifecycle events (Created, Destroyed)
• File operation events (FileOpened, Saving)
• Transformation events (Cropping/Cropped, Rotating/Rotated, Flipping/Flipped)
• Shape events (ShapeChanging/ShapeChanged, resize/drag start/end)
• Adjustment events (ImageFiltering/Filtered, FinetuneValueChanging/Changed, FrameChanging/Changed)
• User interaction events (Zooming/Zoomed, OnPanStart/End, Clicked)
• Toolbar events (ToolbarUpdating, ToolbarItemClicked, QuickAccessToolbarOpening)
• History events (HistoryChanged)
• Event arguments reference for all events

Toolbar Customization

📄 Read: references/toolbar-customization.md

• Reference of built-in toolbar items (Open, Crop, Rotate, Annotation, Filters, etc.)
• Add custom toolbar items and buttons
• Show/hide entire toolbar or specific items
• Enable/disable toolbar items conditionally
• Customize contextual toolbars using ToolbarUpdating event
• Create custom toolbar templates

User Interactions

📄 Read: references/user-interactions.md

• Zoom methods (toolbar buttons, pinch gesture, mouse wheel, keyboard shortcuts)
• Pan/move images across the canvas
• Selection types for cropping
• Get image dimensions and coordinates
• Keyboard shortcuts reference (Ctrl+Z, Ctrl+Y, Ctrl+S, etc.)

Accessibility & Localization

📄 Read: references/accessibility-localization.md

• WCAG compliance and accessibility features
• Keyboard navigation support
• Screen reader compatibility
• ARIA attributes
• Color contrast standards
• Localization and RTL support

Setup Modes & Deployment

📄 Read: references/setup-modes.md

• WebAssembly app setup (Visual Studio, VS Code, .NET CLI)
• Web App setup with interactive render modes (Auto, WebAssembly, Server)
• Theme configuration (Bootstrap5, Fluent2, Material3, Tailwind3)
• Static Web Assets vs CDN references
• Script references and dependencies

Quick Start Example

@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");
    }
}

Setup steps:

1. Install NuGet packages: Syncfusion.Blazor.ImageEditor and Syncfusion.Blazor.Themes
2. Add imports in _Imports.razor: @using Syncfusion.Blazor.ImageEditor
3. Register service in Program.cs: builder.Services.AddSyncfusionBlazor();
4. Add theme stylesheet to index.html or App.razor
5. Add the component and load an image in the Created event

Key Capabilities

Common Patterns

Pattern 1: Load Image and Enable Annotations

<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);
    }
}

Pattern 2: Custom Toolbar

<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" }
    };
}

Pattern 3: Export Image with Quality Control

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
}

Pattern 4: Privacy Redaction Workflow

<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");
    }
}

Pattern 5: Professional Photo Framing

<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");
    }
}

Related Skills

• Implementing Blazor Components - Main library overview
• Implementing Carousels - Image carousel display
• Implementing Rich Text Editor - Text editing capabilities

Note: All code examples use Blazor component syntax. Refer to the Getting Started guide for setup instructions specific to your Blazor hosting model (WebAssembly, Web App, Server).