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.

XAML

<imageeditor:SfImageEditor ImageSaving="SfImageEditor_ImageSaving" />

C#

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.

C#

imageEditor.Save(".png");

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

C#

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