Save and Events in Xamarin Image Editor (SfImageEditor)

29 Sep 202313 minutes to read

You can save the image along with the current edits to the device using the Save method.

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

UWP :
The saved image will be added to default pictures library “C:\Users\your name\Pictures\Saved Pictures”.

Android:
The saved image will be added to default pictures library “Internal storage/Pictures/”.

NOTE

Set the requestLegacyExternalStorage value as true in your app’s manifest file, if the target version is 10.

XAML
<manifest ...>

  <application android:requestLegacyExternalStorage="true" ...>
    ...
  </application>
  
</manifest>

iOS:
In iOS device, the saved image will be added to default pictures library.
In iOS simulator, the saved image will be added to (Library\developer\CoreSimulator\Devices) location.

C#
editor.Save();

Save events

The SfImageEditor has events when performing the save operation namely ImageSaving and ImageSaved.

ImageSaving

This event occurs before saving the image.

Cancel : You can control the save functionality using the Cancel argument.

It restricts saving image to the default location when set Cancel value to true.

XAML
C#
<imageeditor:SfImageEditor Source="{Binding Image}" ImageSaving="SfImageEditor_ImageSaving" />
private void editor_ImageSaving(object sender, ImageSavingEventArgs args)
            {
                args.Cancel = true;  
            }

Stream : You can get current image edits as stream using this argument.

private void editor_ImageSaving(object sender, ImageSavingEventArgs args)
            {
                var stream = args.Stream;
            }

FileName: You can save the edited image in the specified name.

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

ImageSaved

This 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.

public MainPage()
            {               
                            . . .

                 editor.ImageSaved += editor_ImageSaved;

                            . . .
            }

         private void editor_ImageSaved(object sender, ImageSavedEventArgs args)
            {
                 string savedLocation = args.Location; // You can get the saved image location with the help of this argument
            }

Saving Image with Custom Size and Format

The Save method in the SfImageEditor control allows user to save an image in different format such as png, jpg, and bmp.

To choose the format while Saving the image.

C#
editor.Save(".png");

To choose the format and size while Saving the image as follows.

C#
editor.Save(".png",new Size(913,764));

NOTE

Supported formats are .png, .jpg, and .bmp.

Reset

The Reset method, resets the complete set of changes made in image and also resets the image to original loaded image.

C#
editor.Reset();

Reset events

The SfImageEditor has events when performing reset operation namely BeginReset and EndReset.

BeginReset

This event occurs before resetting the changes made in an image. You can control the reset functionality using the cancel argument.

public MainPage()
            {               
                            . . .

                         editor.BeginReset += editor_BeginReset;

                            . . .
            }

        private void editor_BeginReset(object sender, BeginResetEventArgs args)
            {
                args.Cancel = true; //It restricts resetting image to initial loaded image.
            }

EndReset

This event occurs when reset has been completed.

public MainPage()
            {               
                            . . .

                             editor.EndReset += editor_EndReset;

                            . . .
            }

       private void editor_EndReset(object sender, EndResetEventArgs args)
        {
             Navigation.PushModalAsync(new NewImageEditorPage()); //Navigates to new page after completing the reset action.
        }

ImageLoaded Event

This event will be triggered after the image has been loaded. By this event you can add any shapes or text over an image or crop an image while initially loading the image.

public MainPage()
            {               
                            . . .

                editor.ImageLoaded += Editor_ImageLoaded;

                            . . .
            }

        private void Editor_ImageLoaded(object sender, ImageLoadedEventArgs args)
            {
                editor.AddShape(ShapeType.Circle, new PenSettings() {Color = Color.Green,Mode = Mode.Stroke });
            }

ItemSelected Event

This event will be triggered whenever you tap the selected shapes (rectangle, circle, and arrow) and text. You can get the settings of each selected shapes and text using the ItemSelected argument. You can also change the settings that will affect the selected shape.

public MainPage()
            {               
                            . . .

                editor.ImageLoaded += Editor_ImageLoaded;
                editor.ItemSelected += Editor_ItemSelected;

                            . . .
            }

        private void Editor_ImageLoaded(object sender, ImageLoadedEventArgs args)
            {
                editor.AddShape(ShapeType.Circle, new PenSettings() {Color = Color.Green,Mode = Mode.Stroke });
            }

        private void Editor_ItemSelected(object sender, ItemSelectedEventArgs args)
            {
                var Settings = args.Settings;   

                if (Settings is PenSettings)
                {
                    (Settings as PenSettings).Color = color;
                }
                else
                {
                    (Settings as TextSettings).Color = color;
                }
     
            }

ItemUnselected Event

This event will be triggered whenever you change the shape selections from one shape to another shape (rectangle, circle, arrow, and text). You can get the settings of previous selected shapes and text using the ItemUnselected event. You can also change the settings of previous selected shape.

public MainPage()
{
    editor.ItemUnselected += Editor_ItemUnselected;
}

private void Editor_ItemUnselected(object sender, ItemUnselectedEventArgs e)
{
    var Settings = e.Settings;
    if (Settings is PenSettings)
    {
        (Settings as PenSettings).Color = Color.Green;
    }
    else
    {
        (Settings as TextSettings).Color = Color.Green;
    }
}

ImageEdited Event

This event occurs whenever you start to edit an image. You can know whether the current image is edited or not using the IsImageEdited argument.

public MainPage()
{               
    . . .
    editor.ImageEdited += ImageEditor_ImageEdited;
    . . .
}

private void ImageEditor_ImageEdited(object sender, ImageEditedEventArgs e)
{
    If (args.IsImageEdited)
    {
    }            
}