# Blazor ImageEditor Export

The [ImageEditor](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/overview) produces the edited image in two ways:

* The user downloads the image from the [export dialog](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/export#export-dialog).
* The application obtains the image as a `byte[]` through the [`GetFileAsync` method](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/export#get-the-edited-image-in-the-application).

## Export Dialog

The Download tool in the [component toolbar](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools#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.

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

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

## Configure the Export from Code

Use the [`ExecuteAsync` method](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/commands) 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.

> caption Configure the export settings programmatically

```RAZOR.skip-repl
<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](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onexport) 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.

> caption Change the name of the downloaded file

```RAZOR.skip-repl
<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.

> caption Obtain the edited image as a byte array

```RAZOR.skip-repl
<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](https://www.telerik.com/blazor-ui/documentation/getting-started/web-app) 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](https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-increase-signalr-max-message-size).

All other ImageEditor operations run in the browser and do not transfer the image to the server. See [Client-Side Image Processing](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/overview#client-side-image-processing).

## Next Steps

* [Handle the ImageEditor events](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events)
* [Edit images programmatically](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/commands)

## See Also

* [Live Demo: ImageEditor](https://demos.telerik.com/blazor-ui/imageeditor/overview)
* [ImageEditor API Reference](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.telerikimageeditor)