Introducing the New Blazor Image Editor Component
Tags: blazor, webdev, ui, webassembly
Published: 2023-08-03 12:04:08

---
title: Introducing the New Blazor Image Editor Component
published: true
date: 2023-07-28 11:52:31 UTC
tags: blazor, webdev, ui, wasm
canonical_url: https://www.syncfusion.com/blogs/post/new-blazor-image-editor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j82wdf9gkdas7d9rjzw9.png
---
We are happy to introduce the new [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor "Blazor Image Editor Component") component in the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release. It has convenient, built-in tools for rotating, flipping, zooming, and cropping images with user-selected areas. You can insert annotations such as text, freehand drawings, and various shapes like rectangles, ellipses, lines, paths, and arrows over the images. This component also includes filters and finetuning options to enhance the images. It supports keyboard interactions and events and provides a user-friendly interface optimized for touch interactions.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Blazor-Image-Editor-1.png" alt="Blazor Image Editor" style="width:100%">

  <figcaption>Blazor Image Editor</figcaption>

</figure>

Let’s explore the features of the new Blazor Image Editor component and its UI design.

## Use cases

The Blazor Image Editor component is a versatile tool for image transformation and cropping, making it suitable for various applications. Here are some specific use case scenarios where this component excels:

- **Profile**  **pictures** : Crop images to create profile pictures. User-friendly APIs make it easy to customize the editor to fit specific use cases. Users can customize the toolbar or external buttons to enhance the editing experience and tailor it to their needs.
- **Photo editor** : Comprehensive, built-in support for all essential editing features, conveniently accessible through a toolbar. This makes it a perfect fit for integrating into web or mobile apps that require robust image editing capabilities. Whether adjusting color, applying filters, or adding annotations, the Image Editor component provides a seamless solution for editing images within an app.

## Key features

The key features of the Blazor Image Editor are as follows: 

- [Loading image](#Loading)
- [Selection and cropping](#Selection)
- [Transforming images](#Transforming)
- [Image annotations](#Image)
- [Zooming](#Zooming)
- [Filters and finetunes](#Filters)
- [Undo and redo](#Undo)
- [Toolbar](#Toolbar)
- [Quick access toolbar](#Quick)
- [Exporting](#Exporting)
- [Adaptive and touch-friendly UI](#Adaptive)

### <a name="Loading">Loading an image</a>

The Blazor Image Editor offers multiple options for opening images for editing. You can open images by directly providing the encoded data (base64 image data).

Alternatively, you can open images using a URL by specifying it. The component also offers a user-friendly open button in the toolbar, allowing users to select and open image files from their local file system. The supported file types are PNG, JPEG, SVG, and base64.

**Note:** Place the image within the app’s **wwwroot** folder to load it in the Image Editor.

In the following code example, the [**OpenAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_ "OpenAsync method of Blazor Image Editor") method is used to load the hosted image.

```csharp
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
 
<div style="padding-bottom: 15px">
    <SfButton OnClick="OpenAsync">Open Image</SfButton>
</div>
 
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
</SfImageEditor>
 
@code {
    SfImageEditor ImageEditor;
    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };

    private async void OpenAsync ()
    {
        await ImageEditor.OpenAsync("nature.png");
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Viewing-an-image-using-Blazor-Image-Editor.png" alt="Viewing an image using Blazor Image Editor" style="width:100%">

  <figcaption>Viewing an image using Blazor Image Editor</figcaption>

</figure>

### <a name="Selection">Selection and cropping</a>

The Blazor Image Editor offers a range of selection options to cater to different cropping needs. The selection region can be easily adjusted by dragging and resizing it according to the desired cropping area.

#### Selection

We can select an image using either the **toolbar** or the [**SelectAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectAsync_System_String_System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double __System_Nullable_System_Double__"SelectAsync method of Blazor Image Editor") method. While using the [**SelectAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectAsync_System_String_System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double __System_Nullable_System_Double__"SelectAsync method for Blazor Image Editor") method, we need to specify the selection type. The available selection types include custom, square, circle, and the aspect ratios 3:2, 4:3, 5:4, 7:5, and 16:9. This enables users to precisely define the shape and proportions of the selection region for cropping images.

Users can enable the selection functionality in the toolbar by clicking on the **Crop and Transform** button. This action reveals a dropdown menu and users can easily choose their desired option from the **Crop Selection** dropdown button.

#### Cropping

The Blazor Image Editor allows you to crop images based on the selected region. This can be accomplished through either the **toolbar** or the [**CropAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_CropAsync "CropAsync method of Blazor Image Editor") method.

In the toolbar, users can perform cropping by clicking the enabled OK button, which becomes available only after selection. This ensures that a valid region for cropping is defined before applying the operation.

In the following code example, the [**SelectAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectAsync_System_String_System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double __System_Nullable_System_Double__"SelectAsync method of Blazor Image Editor") and [**CropAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_CropAsync "CropAsync method of Blazor Image Editor") methods are used to perform circle selection and cropping of an image.

```csharp
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
 
<div style="padding-bottom: 15px">
    <SfButton OnClick="SelectAsync">Select</SfButton>
    <SfButton OnClick="CropAsync">Crop</SfButton>
</div>
 
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents>
</SfImageEditor>
 
@code {
    SfImageEditor ImageEditor;
    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
 
    private async void CreatedAsync ()
    {
        await ImageEditor.OpenAsync("nature.png");
    }
 
    private async void SelectAsync ()
    {
        await ImageEditor.SelectAsync("Circle");
    }
 
    private async void CropAsync ()
    {
        await ImageEditor.CropAsync();
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Selecting-a-region-in-an-image-using-Blazor-Image-Editor.png" alt="Selecting a region in an image using Blazor Image Editor" style="width:100%">

  <figcaption>Selecting a region in an image using Blazor Image Editor</figcaption>

</figure>
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Cropping-an-image-using-Blazor-Image-Editor.png" alt="Cropping an image using Blazor Image Editor" style="width:100%">

  <figcaption>Cropping an image using Blazor Image Editor</figcaption>

</figure>

### <a name="Transforming">Transforming an image</a>

The toolbar in the Blazor Image Editor offers straightforward and user-friendly support for rotate and flip transformations. Users can access the transform options by clicking the **Crop and Transform** button and choosing Rotate Left, Rotate Right, Horizontal Flip, or Vertical Flip. This enables the easy rotation and flipping of images without the need for complex programming.

Additionally, developers can programmatically utilize the [**RotateAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_RotateAsync_System_Int32_ "RotateAsync method of Blazor Image Editor") and [**FlipAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FlipAsync_Syncfusion_Blazor_ImageEditor_ImageEditorDirection_ "FlipAsync method of Blazor Image Editor") methods to apply the rotation and flip transformations, respectively.

Refer to the following code example.

```csharp
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
 <div style="padding-bottom: 15px">
    <SfButton OnClick="RotateAsync">Rotate</SfButton>
    <SfButton OnClick="FlipAsync">Flip</SfButton>
</div>
 
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents>
</SfImageEditor>
 
@code {
    SfImageEditor ImageEditor;
    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
 
    private async void CreatedAsync()
    {
        await ImageEditor.OpenAsync("nature.png");
    }
 
    private async void RotateAsync()
    {
        await ImageEditor.RotateAsync(90);
    }
 
    private async void FlipAsync()
    {
        await ImageEditor.FlipAsync(ImageEditorDirection.Horizontal);
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Rotating-an-image-using-Blazor-Image-Editor.png" alt="Rotating an image using Blazor Image Editor" style="width:100%">

  <figcaption>Rotating an image using Blazor Image Editor</figcaption>

</figure>
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Flipping-image-using-Blazor-Image-Editor.png" alt="Flipping image using Blazor Image Editor" style="width:100%">

  <figcaption>Flipping image using Blazor Image Editor</figcaption>

</figure>

### <a name="Image">Image annotations</a>

Users can add annotations such as text, freehand drawings, and multiple shapes, including rectangles, ellipses, lines, arrows, and paths, over the images. These annotation features provide versatile ways to mark, highlight, or add graphical elements to images. Whether adding descriptive text, drawing freehand sketches, or incorporating geometric shapes, the Image Editor empowers users to annotate images with precision and creativity.

#### Text annotations

The Blazor Image Editor provides comprehensive support for text annotations. We can add text annotations to images using either the toolbar or the [**DrawTextAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Nullable_System_Double __System_Nullable_System_Double__ System_String_System_String_System_Nullable_System_Int32__System_Boolean_System_Boolean_System_String_ "DrawTextAsync method of Blazor Image Editor") method.

With the [**DrawTextAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Nullable_System_Double __System_Nullable_System_Double__ System_String_System_String_System_Nullable_System_Int32__System_Boolean_System_Boolean_System_String_ "DrawTextAsync method of Blazor Image Editor") method, users can specify the text content, font family, font size, and font styles to insert a text annotation programmatically.

Users can add text annotations using the toolbar by clicking the **Annotation** dropdown button and selecting the **Add Text** option from the pop-up menu. Once the text is added, a contextual toolbar (to customize the text) will automatically be enabled.

#### Shapes annotations

The Image Editor supports a variety of shape annotations, including rectangles, ellipses, lines, arrows, and paths. You can insert and customize them by adjusting their stroke color, fill color, and width. You can add shape annotations using the toolbar or specific methods such as [**DrawRectangleAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRectangleAsync_System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Int32 __System_Nullable_System_Int32__ System_Nullable_System_Int32__System_String_System_String_ "DrawRectangleAsync method of Blazor Image Editor"), [**DrawEllipseAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawEllipseAsync_System_Nullable_System_Double__System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double __System_Nullable_System_Double__ System_String_System_String_ "DrawEllipseAsync method of Blazor Image Editor"), [**DrawLineAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawLineAsync_System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double__System_String_ "DrawLineAsync method of Blazor Image Editor"), [**DrawArrowAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawArrowAsync_System_Nullable_System_Double__System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double __System_Nullable_System_Double__ System_String_Syncfusion_Blazor_ImageEditor_ImageEditorArrowHeadType_Syncfusion_Blazor_ImageEditor_ImageEditorArrowHeadType_ "DrawArrowAsync method of Blazor Image Editor"), and [**DrawPathAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawPathAsync_Syncfusion_Blazor_ImageEditor_ImageEditorPoint ___System_Nullable_System_Double__ System_String_ "DrawPathAsync method of Blazor Image Editor").

In the toolbar, click the **Annotation** dropdown button and select an option from the pop-up menu. This enables users to activate the freehand mode to draw the shapes. Once enabled, a contextual toolbar becomes available, allowing users to customize the stroke color, fill color, and stroke width of the shape annotation.

After the shape annotation is completed, the Image Editor enables a quick access toolbar to clone or delete the shapes. The clone option duplicates the current shape and the delete option removes the shape annotation. This provides a convenient way to adjust or undo the annotation if it is unsatisfactory or no longer required.

In the following code example, the [**DrawTextAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Nullable_System_Double __System_Nullable_System_Double__ System_String_System_String_System_Nullable_System_Int32__System_Boolean_System_Boolean_System_String_ "DrawTextAsync method of Blazor Image Editor") method is used to insert text, and the [**DrawRectangleAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRectangleAsync_System_Nullable_System_Double__System_Nullable_System_Double __System_Nullable_System_Int32__ System_Nullable_System_Int32 __System_Nullable_System_Int32__ System_String_System_String_ "DrawRectangleAsync method of Blazor Image Editor") **,** [**DrawEllipseAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawEllipseAsync_System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double__System_String_System_String_ "DrawEllipseAsync method of Blazor Image Editor") **,** [**DrawLineAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawLineAsync_System_Nullable_System_Double__System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double __System_Nullable_System_Double__ System_String_ "DrawLineAsync method of Blazor Image Editor") **,** [**DrawArrowAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawArrowAsync_System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double __System_Nullable_System_Double__ System_Nullable_System_Double__System_String_Syncfusion_Blazor_ImageEditor_ImageEditorArrowHeadType_Syncfusion_Blazor_ImageEditor_ImageEditorArrowHeadType_ "DrawArrowAsync method of Blazor Image Editor") **,** and [**DrawPathAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawPathAsync_Syncfusion_Blazor_ImageEditor_ImageEditorPoint___System_Nullable_System_Double__System_String_ "DrawPathAsync method of Blazor Image Editor") methods are used to insert shapes.

```csharp
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons

<div style="padding-bottom: 15px">
    <SfButton OnClick="TextAsync">Add Text</SfButton>
    <SfButton OnClick="RectangleAsync">Draw Rectangle</SfButton>
    <SfButton OnClick="EllipseAsync">Draw Ellipse</SfButton>
    <SfButton OnClick="ArrowAsync">Draw Arrow</SfButton>
    <SfButton OnClick="PathAsync">Draw Path</SfButton>
    <SfButton OnClick="LineAsync">Draw Line</SfButton>
</div>
 
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents>
</SfImageEditor>
 
@code {
    SfImageEditor ImageEditor;
    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
    private ImageEditorPoint[] points = new ImageEditorPoint[] { new ImageEditorPoint { X = 400, Y = 200 }, new ImageEditorPoint { X = 500, Y = 300 }, new ImageEditorPoint { X = 350, Y = 400 } };
 
    private async void CreatedAsync()
    {
        await ImageEditor.OpenAsync("nature.png");
    }
 
    private async void TextAsync()
    {
        await ImageEditor.DrawTextAsync(450, 200, "Syncfusion", "Arial", 50, true, true, "#000");
    }
 
    private async void RectangleAsync()
    {
        await ImageEditor.DrawRectangleAsync(200, 50, 120, 120, 4, "#fff", "blue");
    }
 
    private async void EllipseAsync()
    {
        await ImageEditor.DrawEllipseAsync(400, 50, 70, 70, 4, "#fff", "green");
    }
 
    private async void ArrowAsync()
    {
        await ImageEditor.DrawArrowAsync(200, 200, 400, 200, 5, "red", ImageEditorArrowHeadType.Circle);
    }
 
    private async void PathAsync()
    {
        await ImageEditor.DrawPathAsync(points, 5, "yellow");
    }
    private async void LineAsync()
    {
        await ImageEditor.DrawLineAsync(200, 300, 400, 400, 5, "brown");
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Adding-text-and-shape-annotations-using-Blazor-Image-Editor.png" alt="Adding text and shape annotations using Blazor Image Editor" style="width:100%">

  <figcaption>Adding text and shape annotations using Blazor Image Editor</figcaption>

</figure>

#### Freehand drawing

You can also insert and customize freehand drawing annotations. You can adjust the stroke color and width to personalize the annotations. This can be achieved using either the **toolbar** or the [**EnableFreehandDrawAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_EnableFreehandDrawAsync_System_Nullable_System_Boolean__"EnableFreehandDrawAsync method of Blazor Image Editor") method.

In the toolbar, click the **Annotation** dropdown button and select the **Freehand Draw** option from the pop-up menu. This enables users to activate the freehand drawing mode. Once enabled, a contextual toolbar becomes available, allowing users to customize the stroke color and width for their freehand annotations.

After completing the freehand drawing annotation, the Image Editor enables a quick access toolbar that provides an option to delete the drawing.

In the following code example, the [**EnableFreehandDrawAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_EnableFreehandDrawAsync_System_Nullable_System_Boolean__"EnableFreehandDrawAsync method of Blazor Image Editor") **, and** [**DisableFreehandDrawAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DisableFreehandDrawAsync_System_Boolean_ "DisableFreehandDrawAsync method of Blazor Image Editor") methods are used to toggle the freehand drawing mode.

```csharp
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
 
<div style="padding-bottom: 15px">
    <SfButton OnClick="EnableAsync">Enable Freehand Draw</SfButton>
    <SfButton OnClick="DisableAsync">Disable Freehand Draw</SfButton>
</div>
 
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents>
</SfImageEditor>
 
@code {
    SfImageEditor ImageEditor;
    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
 
    private async void CreatedAsync()
    {
        await ImageEditor.OpenAsync("nature.png");
    }
 
    private async void EnableAsync()
    {
        await ImageEditor.EnableFreehandDrawAsync();
    }
 
    private async void DisableAsync()
    {
        await ImageEditor.DisableFreehandDrawAsync();
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Adding-freehand-annotation-to-an-image-using-Blazor-Image-Editor.png" alt="Freehand annotation options in Blazor Image Editor" style="width:100%">

  <figcaption>Freehand annotation options in Blazor Image Editor</figcaption>

</figure>

### <a name="Zooming">Zooming an image</a>

The Blazor Image Editor control provides zoom functionality to magnify or reduce the image size. Users can zoom in or out and pan the image to view specific areas of interest. This can be achieved through either the toolbar or the [**ZoomAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ZoomAsync_System_Double_Syncfusion_Blazor_ImageEditor_ImageEditorPoint_ "ZoomAsync method of Blazor Image Editor") method.

Users can easily zoom in or out in the toolbar by clicking the dedicated **Zoom In** and **Zoom Out** buttons. This provides a convenient way to adjust the zoom level of the images without additional programming.

Alternatively, developers can utilize the [**ZoomAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ZoomAsync_System_Double_Syncfusion_Blazor_ImageEditor_ImageEditorPoint_ "ZoomAsync method of Blazor Image Editor") method to control the zoom functionality programmatically based on specific requirements or user interactions outside the toolbar.

Refer to the following code example.

```csharp
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
 
<div style="padding-bottom: 15px">
    <SfButton OnClick="ZoomInAsync">Zoom In </SfButton>
    <SfButton OnClick="ZoomOutAsync">Zoom Out </SfButton>
</div>
 
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents>
</SfImageEditor>
 
@code {
    SfImageEditor ImageEditor;
    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
    ImageEditorPoint point = new ImageEditorPoint { X = 300, Y = 300 };
    private async void CreatedAsync()
    {
        ImageEditor.OpenAsync("nature.png");
    }
 
    private async void ZoomInAsync()
    {
        ImageEditor.ZoomAsync(2, point);
    }
 
    private void ZoomOutAsync()
    {
        ImageEditor.ZoomAsync(1, point);
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Zooming-an-image-using-Blazor-Image-Editor-1.png" alt="Zooming an image using Blazor Image Editor" style="width:100%">

  <figcaption>Zooming an image using Blazor Image Editor</figcaption>

</figure>

### <a name="Filters">Filters and finetuning</a>

You can apply filters to alter the appearance of an image. Image filters are predefined effects that can be applied to an image to add visual interest or enhance certain features. The available filters are cold, warm, chrome, sepia, grayscale, and invert. We can apply filters by using either the toolbar or the [**ApplyImageFilterAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ApplyImageFilterAsync_Syncfusion_Blazor_ImageEditor_ImageFilterOption_ "ApplyImageFilterAsync method of Blazor Image Editor") method.

You can finetune the image filters to alter the appearance of an image. Adjust the settings of an image filter to achieve the desired effect. The available finetuning options are brightness, contrast, exposure, hue, saturation, opacity, and blur. You can use them through either the toolbar or the [**FinetuneImageAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_ "FinetuneImageAsync method of Blazor Image Editor") method.

In the following code example, the [**ApplyImageFilterAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ApplyImageFilterAsync_Syncfusion_Blazor_ImageEditor_ImageFilterOption_ "ApplyImageFilterAsync method of Blazor Image Editor") and [**FinetuneImageAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_FinetuneImageAsync_Syncfusion_Blazor_ImageEditor_ImageFinetuneOption_System_Int32_ "FinetuneImageAsync method of Blazor Image Editor") methods are used to perform filter and finetuning actions.

```csharp
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
 
<div style="padding-bottom: 15px">
    <SfButton OnClick="BrightnessAsync">Brightness</SfButton>
    <SfButton OnClick="SepiaAsync">Sepia</SfButton>
</div>
 
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents>
</SfImageEditor>
 
@code {
    SfImageEditor ImageEditor;
    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };

    private async void CreatedAsync()
    {
        ImageEditor.OpenAsync("nature.png");
    }
 
    private async void BrightnessAsync()
    {
        ImageEditor.FinetuneImageAsync(ImageFinetuneOption.Brightness, 75);
    }
 
    private void SepiaAsync()
    {
        ImageEditor.ApplyImageFilterAsync(ImageFilterOption.Sepia);
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Filtering-and-finetuning-an-image-using-Blazor-Image-Editor.png" alt="Filtering and finetuning an image using Blazor Image Editor" style="width:100%">

  <figcaption>Filtering and finetuning an image using Blazor Image Editor</figcaption>

</figure>

### <a name="Undo">Undo and redo actions</a>

The undo functionality is used to reverse the most recent modification to an image. By invoking the [**UndoAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UndoAsync "UndoAsync method of Blazor Image Editor") or **Undo** button, the Image Editor reverts the most recently applied action, effectively restoring the image to its previous state.

On the other hand, the redo functionality is used to reapply an action that was previously undone. After using the undo operation, users can use the [**RedoAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_RedoAsync "RedoAsync method of Blazor Image Editor") method or **Redo** button to reapply the action and return the undone changes.

These features enhance the editing experience by allowing users to experiment, revert changes, and selectively apply or reapply modifications to achieve the desired result.

In the following code example, the [**UndoAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UndoAsync "UndoAsync method of Blazor Image Editor") and [**RedoAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_RedoAsync "RedoAsync method of Blazor Image Editor") methods are used to undo and redo the actions performed in the Blazor Image Editor component.

```csharp
@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
 <div style="padding-bottom: 15px">
    <SfButton OnClick="RectangleAsync">Draw Rectangle</SfButton>
    <SfButton OnClick="EllipseAsync">Draw Ellipse</SfButton>
    <SfButton OnClick="UndoAsync">Undo</SfButton>
    <SfButton OnClick="RedoAsync">Redo</SfButton>
</div>
 
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents>
</SfImageEditor>
 
@code {
    SfImageEditor ImageEditor;
    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
 
    private async void CreatedAsync()
    {
        await ImageEditor.OpenAsync("nature.png");
    }
 
    private async void RectangleAsync()
    {
        await ImageEditor.DrawRectangleAsync(200, 50, 120, 120, 4, "#fff", "blue");
    }
 
    private async void EllipseAsync()
    {
        await ImageEditor.DrawEllipseAsync(400, 50, 70, 70, 4, "#fff", "green");
    }

    private async void UndoAsync()
    {
        await ImageEditor.UndoAsync();
    }
 
    private async void RedoAsync()
    {
        await ImageEditor.RedoAsync();
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Undo-and-redo-options-in-Blazor-Image-Editor.png" alt="Undo and redo options in Blazor Image Editor" style="width:100%">

  <figcaption>Undo and redo options in Blazor Image Editor</figcaption>

</figure>

### <a name="Toolbar">Toolbar</a>

The Blazor Image Editor provides options to customize both the built-in and contextual toolbars.

The built-in toolbar can be customized by utilizing the [**Toolbar**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_Toolbar "Toolbar property of Blazor Image Editor") property. This allows developers to specify which toolbar items should be enabled and displayed in the Image Editor toolbar.

The [**ToolbarUpdating**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ToolbarUpdating "ToolbarUpdating property of Blazor Image Editor") event can be utilized to add, remove, or modify toolbar items dynamically, ensuring the contextual toolbar offers relevant and desired customization options during annotation.

In the following code example, the contextual toolbar for the line is rendered by hiding the default delete button and adding a custom delete button using the [**ToolbarUpdating**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ToolbarUpdating "ToolbarUpdating property of Blazor Image Editor") event.

To retrieve the inserted shapes, we’ve used the [GetShapesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetShapesAsync "GetShapesAsync method of Blazor Image Editor") method, which provides a collection of shapes represented by [ShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeSettings.html "ShapeSettings class of Blazor Image Editor"). This method allows you to access and work with the shapes inserted into the image.

```csharp
@using Syncfusion.Blazor.ImageEditor 
@using Syncfusion.Blazor.Navigations

<SfImageEditor @ref="ImageEditor" Height="400"> 
    <ImageEditorEvents Created="CreatedAsync" ToolbarUpdating="ToolbarUpdate" ToolbarItemClicked="ToolbarItemClickedAsync">
    </ImageEditorEvents> 
</SfImageEditor>
  
@code {
    SfImageEditor ImageEditor; 
    private async void CreatedAsync()
    { 
        await ImageEditor.OpenAsync("nature.png"); 
    } 

    private void ToolbarUpdate(ToolbarEventArgs args)
    { 
        if (args.ToolbarType == ShapeType.Line)
        {
            var toolbarItemToRemove = args.ToolbarItems.FirstOrDefault(item => item.Name == "Remove");
           if (toolbarItemToRemove != null)
           {
                  toolbarItemToRemove.Visible = false;
           }
           args.ToolbarItems.Add(new ImageEditorToolbarItemModel { Text = "Delete", TooltipText = "Delete", Align = ItemAlign.Center }); 
        }
    } 

    private async void ToolbarItemClickedAsync(ClickEventArgs args)
    {
        ShapeSettings[] shapeSetting = await ImageEditor.GetShapesAsync();
        if (args.Item.Text == "Delete" && shapeSetting.Length > 0)
        {
             await ImageEditor.DeleteShapeAsync(shapeSetting[0].ID);
         }
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-toolbar-in-Blazor-Image-Editor.png" alt="Customizing the toolbar in Blazor Image Editor" style="width:100%">

  <figcaption>Customizing the toolbar in Blazor Image Editor</figcaption>

</figure>

#### Toolbar template

The Image Editor component allows users to replace its default toolbar with a custom, user-specific UI. This can be achieved by utilizing the [**ToolbarTemplate**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorTemplates.html#Syncfusion_Blazor_ImageEditor_ImageEditorTemplates_ToolbarTemplate "ToolbarTemplate property for Blazor Image Editor") property. With this property, developers can design and implement a toolbar that includes their desired features, layout, and interactions.

In the following code example, the toolbar of the Image Editor is replaced with the user-specific UI using the [**ToolbarTemplate**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorTemplates.html#Syncfusion_Blazor_ImageEditor_ImageEditorTemplates_ToolbarTemplate "ToolbarTemplate Property for Blazor Image Editor Component") property.

```csharp
@using Syncfusion.Blazor.ImageEditor 
@using Syncfusion.Blazor.Buttons 

<SfImageEditor @ref="ImageEditor" Height="400px">
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents> 
    <ImageEditorTemplates> 
        <ToolbarTemplate> 
            <SfButton OnClick="ClickAsync">Enable FreehandDraw</SfButton> 
        </ToolbarTemplate> 
    </ImageEditorTemplates> 
</SfImageEditor> 

@code {
    SfImageEditor ImageEditor;
    private async void CreatedAsync()
    {
        await ImageEditor.OpenAsync("nature.png");
    }

    private async void ClickAsync() 
    {
        await ImageEditor.EnableFreehandDrawAsync(true); 
    } 
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-toolbar-using-templates-in-Blazor-Image-Editor.png" alt="Customizing the toolbar using templates in Blazor Image Editor" style="width:100%">

  <figcaption>Customizing the toolbar using templates in Blazor Image Editor</figcaption>

</figure>

### <a name="Quick">Quick access toolbar</a>

The quick access toolbar becomes active when we select annotations. The default items on the toolbar may differ depending on the annotation. The options to clone and delete annotations will appear by default. Additionally, users can personalize the toolbar items by utilizing the [QuickAccessToolbarOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening "QuickAccessToolbarOpening property of Blazor Image Editor") event.

#### Quick access toolbar template

The Image Editor provides the flexibility to replace its default quick access toolbar with a custom, user-specific UI. This can be achieved by utilizing the [QuickAccessToolbarTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorTemplates.html#Syncfusion_Blazor_ImageEditor_ImageEditorTemplates_QuickAccessToolbarTemplate "QuickAccessToolbarTemplate Property for Blazor Image Editor Component") property. This empowers users to create a personalized editing experience that perfectly suits their app’s needs and enhances the user interface.

Refer to the following code example.

```csharp
@using Syncfusion.Blazor.ImageEditor 
@using Syncfusion.Blazor.Buttons 

<SfImageEditor @ref="ImageEditor" Height="400px"> 
    <ImageEditorEvents Created="CreatedAsync"></ImageEditorEvents> 
    <ImageEditorTemplates> 
        <QuickAccessToolbarTemplate> 
            <SfButton OnClick="ClickAsync">Delete</SfButton> 
        </QuickAccessToolbarTemplate> 
    </ImageEditorTemplates> 
</SfImageEditor> 

@code {
    SfImageEditor ImageEditor;
    private async void CreatedAsync()
    {
        await ImageEditor.OpenAsync("nature.png");
    }

    private async void ClickAsync() 
    {
        ShapeSettings[] shapeSetting = await ImageEditor.GetShapesAsync();
        if (args.Item.Text == "Delete" && shapeSetting.Length > 0)
        {
             await ImageEditor.DeleteShapeAsync(shapeSetting[0].ID);
         }
    } 
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-quick-access-toolbar-in-Blazor-Image-Editor.png" alt="Customizing the quick access toolbar in Blazor Image Editor" style="width:100%">

  <figcaption>Customizing the quick access toolbar in Blazor Image Editor</figcaption>

</figure>

### <a name="Exporting">Exporting an image</a>

Users can save the edited images in the file formats PNG, JPEG, and SVG. This can be achieved by utilizing the [**ExportAsync**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ExportAsync_System_String_Syncfusion_Blazor_ImageEditor_ImageEditorFileType_ "ExportAsync method of Blazor Image Editor") method, where users can specify the desired file type and provide a file name for the saved image.

### <a name="Adaptive">Adaptive and touch-friendly UI</a>

The Blazor Image Editor is designed to be responsive and adapt to various screen sizes, making it suitable for all mobile devices by default. It provides a touch-friendly interface, allowing users to interact with the control using their fingers, stylus pens, or a mouse on the desktop and mobile devices.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Adaptive-UI-in-Blazor-Image-Editor.png" alt="Adaptive UI in Blazor Image Editor" style="width:100%">

  <figcaption>Adaptive UI in Blazor Image Editor</figcaption>

</figure>

**Note:** For more details, refer to the Blazor Image Editor live [demos](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=fluent "Blazor Image Editor demos") and [documentation](https://blazor.syncfusion.com/documentation/image-editor/getting-started "Getting started with Blazor Image Editor").

## Upcoming features

The Blazor Image Editor component is now available in preview mode, and we’ve plans to include the following features in our future releases:

- **Image annotation** : To insert an image as an annotation.
- **Resizing** : To resize the images.
- **IPTC standard** : To add a meta tag to support IPTC standards.
- **Frame support** : To add a frame to the image.

## Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new [Blazor Image Editor component](https://www.syncfusion.com/blazor-components/blazor-image-editor "Blazor Image Editor") in our latest [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release. To see the other updates of this release, we recommend visiting our [Release Notes](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New pages") pages. Stay informed about the latest enhancements and share your feedback in the comments section.

If you’re not a Syncfusion customer, you can download a free trial of [Essential Studio for Blazor](https://www.syncfusion.com/downloads/blazor "Free evaluation of the Essential Studio for Blazor") to start exploring its controls immediately.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). Our team is always ready to assist you!

## Related blogs

- [What’s New in Blazor: 2023 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-blazor-2023-volume-2.aspx "Blog: What’s New in Blazor: 2023 Volume 2")
- [Introducing the Next-Gen Blazor PDF Viewer Component](https://www.syncfusion.com/blogs/post/next-gen-blazor-pdf-viewer.aspx "Blog: Introducing the Next-Gen Blazor PDF Viewer Component")
- [Simple steps to create thumbnail images using the Blazor File Upload component](https://www.syncfusion.com/blogs/post/create-thumbnail-images-blazor.aspx "Blog: Simple steps to create thumbnail images using the Blazor File Upload component")
- [Role-based authorization in Blazor File Manager: an overview](https://www.syncfusion.com/blogs/post/role-based-authorization-blazor-file-manager.aspx "Blog: Role-based authorization in Blazor File Manager: an overview")