👁 Image
Syncfusion.Blazor.ImageEditor 33.2.13

Syncfusion® Blazor ImageEditor

Full-featured image editing component for Blazor applications. Crop, rotate, flip, straighten, apply filters, frames, image redaction and annotate images with shapes and freehand drawings with an intuitive user interface.

👁 Blazor ImageEditor

Key features

• Image cropping, rotating, flipping, and straightening
• Zooming and panning with mouse wheel support
• Built-in filters (blur, brightness, saturation, hue, etc.)
• Annotation tools (rectangles, ellipses, lines, arrow, path, text and image)
• Freehand drawing and brush customization
• Predefined frames (mat, bevel, line, hook and inset)
• Image resize (both aspect and non-aspect ratios)
• Image redaction (blur and pixelate redactions)
• Undo and redo functionality
• File restriction (file extension and file size)
• Export images to multiple formats
• Touch gesture support for both mobile and desktop devices
• Keyboard shortcuts and accessibility support

Add stylesheet and script references

• For Blazor Web App / Blazor Server App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

1. Register the Syncfusion® Blazor service in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add Blazor ImageEditor component to your Razor page.

@using Syncfusion.Blazor.ImageEditor 

<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
 <ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
</SfImageEditor> 

@code { 
 SfImageEditor ImageEditor; 
 private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { }; 

 private async void OpenAsync() 
 { 
 // Load default image
 await ImageEditor.OpenAsync("sample.jpg"); 
 } 
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with WebAssembly
• API Reference
• Live Demos
• Feature Overview

Support

• Submit a support ticket
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

| Toll Free: 1-888-9-DOTNET