Blazor ImageEditor Export

Updated on Nov 9, 2026

The ImageEditor produces the edited image in two ways:

• The user downloads the image from the export dialog.
• The application obtains the image as a byte[] through the GetFileAsync method.

Export Dialog

The Download tool in the component toolbar opens the Export Image dialog, which allows the user to:

• Set the file name.
• Select the export format.
• Preview the result and file size.

The dialog detects transparency in the image and selects PNG by default. The default file name comes from the opened image. When using the Data parameter to load an image, the default file name is image.

The following table lists the supported export formats, which are also the members of the ImageEditorExportFormat enum.

Format	Enum Member	Transparency
PNG	Png	Supported
JPEG	Jpeg	Not supported
WebP	Webp	Supported

Configure the Export from Code

Use the ExecuteAsync method to set the export format, the export quality, and the file name before the user opens the Export Image dialog.

Execute the command after the image loads. Opening an image resets the export file name to the name of the new image.

Configure the export settings programmatically

RAZOR

<TelerikButton OnClick="@OnExportSettingsButtonClick">Set Export Settings</TelerikButton>

<TelerikImageEditor @ref="@ImageEditorRef" ImageUrl="images/sample-photo.jpg" />

@code {
    private TelerikImageEditor ImageEditorRef { get; set; }

    private async Task OnExportSettingsButtonClick()
    {
        await ImageEditorRef.ExecuteAsync(ImageEditorCommand.SetExportSettings,
            new ImageEditorExportSettingsArgs()
            {
                Format = ImageEditorExportFormat.Jpeg,
                Quality = 0.9,
                FileName = "product-photo"
            });
    }
}

Rename or Cancel the Download

The OnExport event fires before the browser downloads the file. Use the event to change the file name or to cancel the download, for example, when the user does not have the required permissions.

Change the name of the downloaded file

RAZOR

<TelerikImageEditor ImageUrl="images/sample-photo.jpg" OnExport="@OnImageEditorExport" />

@code {
    private void OnImageEditorExport(ImageEditorExportEventArgs args)
    {
        args.FileName = $"edited-{DateTime.Now:yyyy-MM-dd}";
    }
}

Get the Edited Image in the Application

The GetFileAsync method returns the edited image as a Task<byte[]> in the current export format. Use it to save the result to a database, or to upload it to a remote service. The method returns null when no image is loaded.

Obtain the edited image as a byte array

RAZOR

<TelerikButton OnClick="@OnSaveButtonClick" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">
    Save Image
</TelerikButton>

<TelerikImageEditor @ref="@ImageEditorRef"
                    ImageUrl="images/sample-photo.jpg"
                    Width="100%"
                    Height="600px" />

@code {
    private TelerikImageEditor? ImageEditorRef;
    
    private async Task OnSaveButtonClick()
    {
        byte[]? imageBytes = await ImageEditorRef!.GetFileAsync();
        if (imageBytes != null)
        {
            // Save the image to a database or a file storage.
        }
    }
}

Blazor Server Apps and Large Images

In Blazor Server apps, GetFileAsync transfers the image from the browser to the .NET runtime over the SignalR WebSocket. The default maximum message size is 32 KB. To work with larger images, increase the maximum SignalR message size.

All other ImageEditor operations run in the browser and do not transfer the image to the server. See Client-Side Image Processing.

Next Steps

• Handle the ImageEditor events
• Edit images programmatically

See Also

• Live Demo: ImageEditor
• ImageEditor API Reference