Save and Reset Events in UWP Image Editor (SfImageEditor)

10 May 202112 minutes to read

The image can be saved along with the changes. Saving an image can be done in the following two ways:

  • From Toolbar
  • Using Code

From Toolbar

To save an image from the toolbar, click the Save button in the top toolbar. The saved image will be added in default pictures library “C:\Users\your name\Pictures\Saved Pictures”.

Using Code

Programmatically, Save method can be used in the SfImageEditor control to save the image.

  • c#
  • imageEditor.Save();

    Events

    The SfImageEditor has Events namely, ImageSaving and ImageSaved.

    ImageSaving

    This event occurs before saving the image. Described the ImageSaving event arguments below.

    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.

    <imageeditor:SfImageEditor ImageSaving="SfImageEditor_ImageSaving" />
    private void SfImageEditor_ImageSaving(object sender, Syncfusion.UI.Xaml.ImageEditor.ImageSavingEventArgs args)
                {
                    args.Cancel = true;  
                }

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

  • c#
  • private void SfImageEditor_ImageSaving(object sender, Syncfusion.UI.Xaml.ImageEditor.ImageSavingEventArgs args)
                {
                    var stream = args.Stream;
                }

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

  • c#
  • private void SfImageEditor_ImageSaving(object sender, Syncfusion.UI.Xaml.ImageEditor.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 below,

  • c#
  • string savedLocation = args.Location;

    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.

    You can choose the format while saving the image.

    imageEditor.Save(".png");

    You can choose the format and size while saving the image as follows.

    imageEditor.Save(".png",new Size(913,764));

    NOTE

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

    Reset

    You can reset the changes which has been made in the image.

    From Toolbar

    To reset the changes from the toolbar, click the Reset button in the top toolbar. The changes will be reset and the initial loaded image will appear.

    Using Code

    The Reset method resets the all changes which has been made in the image and resets the original loaded image to the Image Editor control.

  • c#
  • imageEditor.Reset();

    Events

    The SfImageEditor has Events namely, BeginReset and EndReset.

    BeginReset

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

  • c#
  • public MainPage()
                {               
                                . . .
    
                             imageEditor.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.

  • c#
  • public MainPage()
                {               
                                . . .
    
                                 imageEditor.EndReset += editor_EndReset;
    
                                . . .
                }
    
            private void editor_EndReset(object sender, EndResetEventArgs args)
                {
                 
                    this.Frame.Navigate(typeof(NewPage)); //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.

  • c#
  • public MainPage()
                {               
                                . . .
    
                    imageEditor.ImageLoaded += Editor_ImageLoaded;
    
                                . . .
                }
    
            private void Editor_ImageLoaded(object sender, ImageLoadedEventArgs args)
                {
                    imageEditor.AddShape(ShapeType.Circle, new PenSettings() { });
                }

    ItemSelected event

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

  • c#
  • public MainPage()
                {               
                                . . .
    
                    imageEditor.ImageLoaded += Editor_ImageLoaded;
                    imageEditor.ItemSelected += Editor_ItemSelected;
    
                                . . .
                }
    
            private void Editor_ImageLoaded(object sender, ImageLoadedEventArgs args)
                {
                    imageEditor.AddShape(ShapeType.Circle, new PenSettings() {Mode = Mode.Stroke });
                }
    
            private void Editor_ItemSelected(object sender, ItemSelectedEventArgs args)
                {
                    var settings = args.Settings;
    
                    if (settings is PenSettings)
                    {
                        (settings as PenSettings).Color = new SolidColorBrush(Colors.Blue);
                    }
                    else
                    {
                        (settings as TextSettings).Color = new SolidColorBrush(Colors.Blue);
                    }
         
                }

    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, text or custom view using the ItemUnselected event. You can also change the settings of previous selected shapes.

  • c#
  • public MainPage()
    {
        imageEditor.ItemUnselected += Editor_ItemUnselected;
    }
    
    private void Editor_ItemUnselected(object sender, ItemUnselectedEventArgs args)
    {
                var settings = args.Settings;
    
                if (settings is PenSettings)
                {
                    (settings as PenSettings).Color = new SolidColorBrush(Colors.Green);
                }
                else
                {
                    (settings as TextSettings).Color = new SolidColorBrush(Colors.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.

  • c#
  • public MainPage()
    {               
        . . .
        imageEditor.ImageEdited += ImageEditor_ImageEdited;
        . . .
    }
    
    private void ImageEditor_ImageEdited(object sender, ImageEditedEventArgs e)
    {
        if (args.IsImageEdited)
        {
        }            
    }

    See also

    How to change the image saving location in the image editor control for uwp

    How to retrieve an image from the saved location in uwp

    How to save image to stream in uwp image editor

    How to change the image saving location in uwp