Resize in the Blazor Image Editor component

6 Oct 20232 minutes to read

The resize feature in an Image Editor is a valuable tool that empowers users to modify the size or dimensions of an image to meet their specific requirements. Whether it’s for printing, web display, or any other purpose, this feature allows users to tailor images to their desired specifications.

Apply resize to the image

The Image Editor control includes a ImageResizeAsync method, which allows you to adjust the size of an image. This method takes three parameters that define how the resizing should be carried out:

  • width: Specifies the resizing width of the image.

  • height: Specifies the resizing 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

Here is an example of resizing the image using the ImageResizeAsync method.

@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);
    }

}

Blazor Image Editor with Resize an image

Resizing event

The ImageResizing event is triggered when resizing the image. This event provides information encapsulated within an object, which includes details about the previous and current height and width of an image.

The parameter available in ResizeEventArgs is,