syncfusion-blazor-image-editor

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: syncfusion-blazor-image-editor
description: Implement comprehensive image editing capabilities in Blazor applications using the Syncfusion Image Editor component. Use this skill when implementing image editing, annotations, transformations, cropping, filtering, zooming, and panning features. Supports annotations (text, shapes, freehand), transformations (crop, rotate, flip, resize), effects (filters, fine-tuning), toolbar customization, and keyboard shortcuts.
metadata:
  author: "Syncfusion Inc"
  version: "34.1.29"
  category: "File Editors"
---

# 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) **NE