Resize in the Blazor Image Editor component

10 Nov 20252 minutes to read

The resize feature adjusts the size or dimensions of an image to match specific requirements for printing, web display, or other use cases.

Apply resize to the image

The Image Editor control provides the ImageResizeAsync method to change image size. This method accepts three parameters that define the resizing behavior:

  • width: Sets the target width of the image.

  • height: Sets the target height of the image.

  • isAspectRatio: Indicates whether to preserve the original aspect ratio.

    • When true, the image maintains its original aspect ratio. The specified width is applied, and the height adjusts automatically.
    • When false, the image resizes to the specified width and height without preserving the aspect ratio.
    • The default value is false.

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("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
    }

    private async void AspectClick()
    {
        await ImageEditor.ImageResizeAsync(300, 400, true);
    }

    private async void NonAspectClick()
    {
        await ImageEditor.ImageResizeAsync(400, 100, false);
    }
}

Blazor Image Editor with a resized image

Resizing event

The ImageResizing event triggers while an image is being resized and provides details about the previous and current dimensions.

Parameters available in ImageResizeEventArgs: