What’s New in Blazor Image Editor: 2023 Volume 3
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (180).NET Core  (28).NET MAUI  (225)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (41)Black Friday Deal  (1)Blazor  (234)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (199)File Formats  (72)Flutter  (136)JavaScript  (226)Microsoft  (121)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (962)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (163)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (10)Business intelligence  (55)Button  (4)C#  (163)Chart  (145)Chart of the week  (57)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (677)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (21)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (521)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (403)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (625)What's new  (339)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
What’s New in Blazor Image Editor: 2023 Volume 3

What’s New in Blazor Image Editor: 2023 Volume 3

The Syncfusion Blazor Image Editor is a user interface that allows users to edit images. It provides a range of built-in tools for rotating, flipping, zooming, and cropping images with user-selected areas.

Blazor Image Editor Component
Blazor Image Editor Component

In this blog, we’ll explore the new features added to the Syncfusion Blazor Image Editor component for the 2023 Volume 3 release.

Image annotation

The new image annotation support in the Blazor Image Editor allows you to add and customize images directly. You can easily insert images or icons at specific locations within the main image and customize various aspects of them. You also have control over customization options, including rotate, flip, and transparency for the image annotation.

Achieve through end-user capabilities!

You can add image annotations by selecting the Annotation dropdown button in the toolbar and selecting the Add Image option from it.

The following image shows the contextual and quick access toolbar, which will appear once the image is inserted into the Image Editor component. Using this, users can clone, delete, and change the transparency of the image, as well as rotate and flip the image.

Adding image annotation using toolbar in Blazor Image Editor
Adding image annotation using the toolbar in Blazor Image Editor

Achieve programmatically

The DrawImageAsync method serves the purpose of inserting an image into the Blazor Image Editor component. These image annotations can be used for various purposes, such as adding logos, watermarks, or decorative elements to an image. The DrawImageAsync method accepts six parameters to insert the image annotation:

  • data: Specifies the image data or URL of the image to be inserted.
  • x: Specifies the x-coordinate of the top-left corner of the image.
  • y: Specifies the y-coordinate of the top-left corner of the image.
  • width: Specifies the width of the image.
  • height: Specifies the height of the image.
  • isAspectRatio: Specifies whether the image is rendered with aspect ratio or not.

Refer to the following code example to insert an image annotation using the Blazor Image Editor component.

@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
<div style="padding-bottom: 15px">
    <SfButton OnClick="DrawImageAsync">Add Image</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 DrawImageAsync()
    {
        ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync();
        await ImageEditor.DrawImageAsync("bridge.png", Dimension.X, Dimension.Y, 200, 200, true);
    }
}

Image resizing

The Blazor Image Editor now provides the capability to resize images. Whether it’s for printing, web display, or any other purpose, this feature allows users to tailor images to the desired specifications. Users also have an option to maintain the image’s aspect ratio or not.

Achieve through end-user capabilities

You can resize images by selecting the Resize button from the toolbar. It displays two text boxes for setting the height and width and a button to enable or disable the aspect ratio, as shown in the following image.

Resizing an image using the toolbar in Blazor Image Editor
Resizing an image using the toolbar in Blazor Image Editor

Achieve programmatically

The ImageResizeAsync method resizes an image in the Image Editor. This method takes three parameters that define how the resizing should be carried out:

  • width: Specifies the resized width of the image.
  • height: Specifies the resized height of the image.
  • isAspectRatio: Specifies a Boolean value indicating whether the image should maintain its original aspect ratio during resizing. When set to true, the image will be resized while preserving its aspect ratio.

Refer to the following code example to resize the image using the Blazor Image Editor component.

@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
<div style="padding-bottom: 15px">
    <SfButton OnClick="AspectClick">Aspect ratio</SfButton>
    <SfButton OnClick="NonAspectClick">Non aspect ratio</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 AspectClick()
    {
        await ImageEditor.ImageResizeAsync(300, 342, true);
    }
    private async void NonAspectClick()
    {
        await ImageEditor.ImageResizeAsync(400, 100, true);
    }
}

Frames

You can also add decorative borders or frames around images to enhance their overall appearance and appeal. We have provided a few sets of frames: Mat, Bevel, Line, Hook, and Inset.

Depending on the frame type selected, users may have additional customization options, such as adjusting the frame’s thickness, color, texture, or other attributes. This allows for fine-tuning the appearance of the frame to match the image’s theme or the user’s preferences.

Achieve through end-user capabilities

You can add frames by selecting the Frame button in the toolbar, which displays a list of frame options available in the Blazor Image Editor. The contextual toolbar will be displayed once the user selects the frame, and it will display customization options based on the selected frame.

Refer to the following image.

Adding a frame to an image using Blazor Image Editor
Adding a frame to an image using Blazor Image Editor

Achieve programmatically

The DrawFrameAsync method applies frames to images. This allows a user to enhance the overall appearance and appeal of an image. This method takes nine parameters to define the properties of the frame:

  • frameType: Specifies the image data or URL of the image to be inserted.
  • color: Specifies the color for the frame.
  • gradientColor: Specifies the gradient color for the frame.
  • size: Specifies the size of the frame.
  • inset: Specifies the inset value for line, hook, and inset-type frames.
  • offset: Specifies the offset value for line and inset type frames.
  • borderRadius: Specifies the border radius for line-type frames.
  • frameLineStyle: Specifies the frame line style for line type frames.
  • lineCount: Specifies the line count for line type frames.

Refer to the following code example to apply a frame to an image using the Blazor Image Editor.

@using Syncfusion.Blazor.ImageEditor
@using Syncfusion.Blazor.Buttons
<div style="padding-bottom: 15px">
    <SfButton OnClick="MatClick">Mat</SfButton>
    <SfButton OnClick="BevelClick">Bevel</SfButton>
    <SfButton OnClick="LineClick">Line</SfButton>
    <SfButton OnClick="InsetClick">Inset</SfButton>
    <SfButton OnClick="HookClick">Hook</SfButton>
</div>

<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()
    {
        await ImageEditor.OpenAsync("nature.png");
    }
    private async void MatClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Mat, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }
    private async void BevelClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Bevel, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }
    private async void LineClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Line, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }
    private async void InsetClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Inset, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }
    private async void HookClick()
    {
        await ImageEditor.DrawFrameAsync(FrameType.Hook, "red", "blue", 20, 20, 20, 20, FrameLineStyle.Solid, 1);
    }
}

Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the new features of our Blazor Image Editor component. If you would like to give it a try, please download the latest available version of Essential Studio, 2023 Volume 3. Experience wonderful image editing with this component, and provide your valuable feedback in the comments section below.

Also, check out our Release Notes and the What’s New pages to see the other available features in the 2023 Volume 3 release.

The new version is available for existing customers on the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out our controls’ features.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed