Shiny Controls v1.0 - The Ultra Control Suite for .NET MAUI & BlazorO...M...G!

ImageEditor | Save & Export

Save & Export

Bind SaveCommand to receive an EditedImage object when the user taps Save:

[RelayCommand]
async Task Save(EditedImage editedImage)
{
    await using var stream = await editedImage.ToStreamAsync(ImageExportFormat.Png);

    var filePath = Path.Combine(FileSystem.CacheDirectory, "edited.png");
    await using var fileStream = File.Create(filePath);
    await stream.CopyToAsync(fileStream);
}

ToStreamAsync parameters:

Parameter	Type	Default	Description
`format`	`ImageExportFormat`	`Png`	Output format: Png, Jpeg, or Webp
`quality`	`float`	`0.92`	Compression quality (0–1, applies to Jpeg/Webp)
`width`	`int?`	`null`	Target width (null = original image width)
`height`	`int?`	`null`	Target height (null = original image height)

You can also get the EditedImage programmatically via editor.GetEditedImage().

ViewModel Pattern

public partial class ImageEditorViewModel : ObservableObject
{
    [ObservableProperty] ImageSource? imageSource = "photo.png";
    [ObservableProperty] bool canUndo;
    [ObservableProperty] bool canRedo;
    [ObservableProperty] ImageEditorToolMode currentToolMode;
    [ObservableProperty] Color drawColor = Colors.White;

    [RelayCommand]
    async Task PickImage()
    {
        var result = await MediaPicker.PickPhotoAsync();
        if (result == null) return;
        ImageSource = ImageSource.FromFile(result.FullPath);
    }

    [RelayCommand]
    async Task Save(EditedImage editedImage)
    {
        await using var stream = await editedImage.ToStreamAsync(ImageExportFormat.Png);
        // Save stream to file, upload, etc.
    }
}

Blazor Usage

The Blazor <ImageEditor> component mirrors the MAUI control. Use @ref to call methods like GetEditedImage:

<ImageEditor @ref="editor"
             Source="@imageUrl"
             AllowCrop="true"
             AllowDraw="true"
             DrawStrokeColor="#ffffff"
             CanUndoChanged="v => canUndo = v"
             CanRedoChanged="v => canRedo = v" />

@code {
    ImageEditor? editor;
    string? imageUrl = "https://example.com/photo.jpg";
    bool canUndo, canRedo;
}