Save image using .NET MAUI Image Editor (SfImageEditor)

21 Jul 202610 minutes to read

The Image Editor control in .NET MAUI allows you to save the edited image as PNG, JPG, JPEG, and BMP.

Save method

To save the modified image, use the Save method, which accepts parameters such as file name, file type, file path, and image size. The supported file types for saving are PNG, JPG, JPEG and BMP. You can save the image by clicking Save on the toolbar.

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor"
                               Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="Save"
            Clicked="OnSaveImageClicked" />
</Grid>
using Syncfusion.Maui.ImageEditor;

private void OnSaveImageClicked(object sender, EventArgs e)
{
    this.imageEditor.Save(ImageFileType.Png, "D:\\Syncfusion\\Pictures", "Syncfusion");
}

NOTE

JPG format is supported only on Android and Windows. It is not supported on macOS or iOS.

The saved image will be added to the device for each platform in the following locations:

Windows, MacCatalyst, and iOS

In Windows, MacCatalyst, and iOS platforms, the image will be saved in the following location:

System.Environment.SpecialFolder.MyPictures

For more information, see the System.Environment.SpecialFolder documentation.

On a Windows device, the image will be saved to:

C:\Users\your name\Pictures

On a MacCatalyst device, the image will be saved to:

/Users/your name/Documents/Pictures

On an iOS device, the image will be saved to:

/Photos/Pictures

Enable file access permission

For MacCatalyst devices, include the following permission in the Entitlements.plist file.

<key>com.apple.security.files.user-selected.read-write</key>
<true/>

Add photo library usage description

For MacCatalyst devices, include the following permission in the Info.plist file.

<key>NSPhotoLibraryUsageDescription</key>
<string>Pick Photos</string>

Android

API 29 and above

For devices running Android API 29 and above, the image is saved to the Pictures folder using the following relative path:

Android.Provider.MediaStore.IMediaColumns.RelativePath

For more details, see the MediaStore.MediaColumns documentation.

API 28 and below

For devices running Android API 28 and below, the image is saved using the following URI:

Android.Provider.MediaStore.Images.Media.ExternalContentUri

For more details, see the MediaStore.Images.Media documentation.

On an Android device, the image will be saved to:

\Internal storage\Pictures

NOTE

For Android, include the required permission in the AndroidManifest.xml file. For more details, see the App Model Permissions documentation.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Image save in .NET MAUI ImageEditor

Image save action events

The Image Editor has events when performing the save operation, such as ImageSaving and ImageSaved.

Image saving event

The ImageSaving event occurs before saving the image.

Cancel

Control the save functionality by setting the Cancel argument to true. It restricts the image save to the default location.

<imageEditor:SfImageEditor x:Name="imageEditor"
                           Source="image.png"
                           ImageSaving="OnImageSaving" />
using Syncfusion.Maui.ImageEditor;

private void OnImageSaving(object sender, ImageSavingEventArgs args)
{
    if (!this.imageEditor.IsImageEdited)
    {
        args.Cancel = true;
    }
}

ImageStream

Access the current image edits as a stream using the ImageStream argument.

using System.IO;
using Syncfusion.Maui.ImageEditor;

public partial class MainPage : ContentPage
{
    private Stream stream;

    public MainPage()
    {
        InitializeComponent();
        imageEditor.ImageSaving += OnImageSaving;
    }

    private void OnImageSaving(object sender, ImageSavingEventArgs args)
    {
        stream = args.ImageStream;
    }
}

FileName

Save the edited image with the specified name using the FileName argument.

using Syncfusion.Maui.ImageEditor;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        imageEditor.ImageSaving += OnImageSaving;
    }

    private void OnImageSaving(object sender, ImageSavingEventArgs args)
    {
        args.FileName = "SavedImage";
    }
}

FileType

Change the file type of the saved image to ImageFileType.Png, ImageFileType.Jpeg, or BMP using the FileType argument.

using Syncfusion.Maui.ImageEditor;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        imageEditor.ImageSaving += OnImageSaving;
    }

    private void OnImageSaving(object sender, ImageSavingEventArgs args)
    {
        args.FileType = ImageFileType.Png;
    }
}

Compression Quality

Optimize the saved image’s file size on Android, iOS, and MacCatalyst devices, when the FileType is set to ImageFileType.Jpeg.

using Syncfusion.Maui.ImageEditor;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        imageEditor.ImageSaving += OnImageSaving;
    }

    private void OnImageSaving(object sender, ImageSavingEventArgs args)
    {
        #if ANDROID || IOS || MACCATALYST
        args.CompressionQuality = 0.5F;
        #endif
    }
}

Image saved event

The ImageSaved event occurs after the image has been saved. To get the location of the saved image, use the Location argument as shown in the following code.

<imageEditor:SfImageEditor Source="image.png" 
                           ImageSaved="OnImageSaved" />
using Syncfusion.Maui.ImageEditor;

private void OnImageSaved(object sender, ImageSavedEventArgs args)
{
    string savedLocation = args.Location;
}

Save picker opening event

The SavePickerOpening event occurs when the save picker opens on clicking the save icon in the toolbar.

Cancel

Restrict the save picker opening by setting the Cancel argument to true. If the save picker is disabled, the image will be saved in the default location. For more information, see the Save method section.

<imageEditor:SfImageEditor Source="image.png" 
                           SavePickerOpening="OnSavePickerOpening" />
using System.ComponentModel;
using Syncfusion.Maui.ImageEditor;

private void OnSavePickerOpening(object sender, CancelEventArgs args)
{
    args.Cancel = true;
}

Check unsaved annotation edits

The Image Editor notifies whether there are unsaved edits or drawn annotations using the following properties.

HasUnsavedEdits

The HasUnsavedEdits property notifies whether there are unsaved edits such as crop, effects, shapes, text, and pen annotations in the image editor.

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor" Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="HasUnsavedEdits"
            Clicked="OnHasUnsavedEditsClicked"
            HorizontalOptions="Center" />
</Grid>
private void OnHasUnsavedEditsClicked(object sender, EventArgs e)
{
    if (this.imageEditor.HasUnsavedEdits)
    {
        this.imageEditor.SaveEdits();
    }
}

HasUnsavedDrawnAnnotations

The HasUnsavedDrawnAnnotations property notifies whether there are unsaved pen, polygon, and polyline annotations drawn in the image editor.

<Grid RowDefinitions="0.9*, 0.1*">
    <imageEditor:SfImageEditor x:Name="imageEditor" Source="image.jpeg" />
    <Button Grid.Row="1"
            Text="HasUnsavedDrawnAnnotations"
            Clicked="OnHasUnsavedDrawnAnnotationsClicked"
            HorizontalOptions="Center" />
</Grid>
private void OnHasUnsavedDrawnAnnotationsClicked(object sender, EventArgs e)
{
    if (this.imageEditor.HasUnsavedDrawnAnnotations)
    {
        this.imageEditor.SaveEdits();
    }
}

NOTE

View sample in GitHub