syncfusion-blazor-image-editor

What this skill does

# 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](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](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](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](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](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](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](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](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](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](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](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](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](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

```csharp
@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

| Feature | Purpose | Reference |
|---------|---------|-----------|
| **Image Loading** | Open JPEG, PNG, JPG, WEBP, BMP files | core-operations.md |
| **Text Annotations** | Add labels, captions, watermarks with underline/strikethrough | annotations.md |
| **Shape Annotations** | Draw rectangles, ellipses, arrows, paths with z-order control | annotations.md |
| **Freehand Drawing** | Sketch and draw directly on images | annotations.md |
| **Redaction** | Hide sensitive info with blur/pixelate for privacy compliance | redaction.md |
| **Frames** | Apply decorative borders (Mat, Bevel, Line, Inset, Hook) | frames.md |
| **Crop & Transform** | Crop with multiple selection types, rotate, flip, straighten | image-transformations.md |
| **Filters & Effects** | Apply fine-tuning and predefined filters | adjustments-filters-effects.md |
| **Zoom & Pan** | Multiple zoom methods and image panning | user-interactions.md |
| **Export** | Save as PNG, J