Save image using .NET MAUI Image Editor (SfImageEditor)
19 Sep 20249 minutes to read
The Image Editor control in .NET MAUI allows you to save the edited image as PNG, 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, 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>private void OnSaveImageClicked(object sender, EventArgs e)
{
this.imageEditor.Save(ImageFileType.Png, "D:\\Syncfusion\\Pictures", "Syncfusion");
}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
Please refer to the System.Environment.SpecialFolder documentation for more information.
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
Android
API 29 and above
For devices running Android API 29 and above, the image will be saved to the Pictures folder using the following relative path:
Android.Provider.MediaStore.IMediaColumns.RelativePath
Please refer to the MediaStore.MediaColumns documentation for more details.
API 28 and below
For devices running Android API 28 and below, the image will be saved using the following URI:
Android.Provider.MediaStore.Images.Media.ExternalContentUri
Please refer to the MediaStore.Images.Media documentation for further information.
On an Android device, the image will be saved to:
\Internal storage\Pictures
NOTE
For android, you should include permission in AndroidManifest.xml file. Please refer to the App Model Permissions documentation for more details.
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
Image save action events
The Image Editor has events when performing the save operation, such as ImageSaving and ImageSaved.
Image saving event
This 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" />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.
public MainPage()
{
. . .
imageEditor.ImageSaving += OnImageSaving;
. . .
}
private void OnImageSaving(object sender, ImageSavingEventArgs args)
{
stream = args.ImageStream;
}FileName: Save the edited image in the specified name.
public MainPage()
{
. . .
imageEditor.ImageSaving += OnImageSaving;
. . .
}
private void OnImageSaving(object sender, ImageSavingEventArgs args)
{
args.FileName = "SavedImage";
}FileType: Changes the file type of the saved image to ImageFileType.Png or ImageFileType.Jpeg or BMP.
public MainPage()
{
. . .
imageEditor.ImageSaving += OnImageSaving;
. . .
}
private void OnImageSaving(object sender, ImageSavingEventArgs args)
{
args.FileType = ImageFileType.Png;
}CompressionQuality: Optimize the saved image’s file size on Android, iOS and MacCatalyst devices, when the FileType is set to ImageFileType.Jpeg.
public MainPage()
{
. . .
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" />private void OnImageSaved(object sender, ImageSavedEventArgs args)
{
string savedLocation = args.Location;
}Save picker opening event
The SavePickerOpening event occurs while the save picker opens on the save icon clicked 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.
Please refer to here to learn more about the default save location.
<imageEditor:SfImageEditor Source="image.png" SavePickerOpening="OnSavePickerOpening" />private void OnSavePickerOpening(object sender, CancelEventArgs args)
{
args.Cancel = true;
}Check unsaved annotation edits
- HasUnsavedEdits
The HasUnsavedEdits property notifies the users whether there are unsaved edits such as Crop, Effects, Shapes, Text and Pen annotations in 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 the users whether there are unsaved pen, polygon and polyline drawn in 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.HasUnsavedEdits)
{
if (this.imageEditor.HasUnsavedDrawnAnnotations)
{
this.imageEditor.SaveEdits();
}
}
}NOTE