Category / Section
How to save edits and load them in the ImageEditor
1 min read
ImageEditor allows you to save the edits over the image and load them in image editor whenever we need them.
Step 1: Create image editor sample with all necessary assemblies.
Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it.
https://help.syncfusion.com/xamarin/sfimageeditor/getting-started
Step 2: Use the SaveEdits method to save the changes we performed over the image. LoadEdits method will load the same edits that were edited previously. So, we can reuse the same.
The following code snippet illustrates how to achieve this.
Xaml:
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ImageEditorSerilization" xmlns:imageeditor="clr-namespace:Syncfusion.SfImageEditor.XForms;assembly=Syncfusion.SfImageEditor.XForms" x:Class="ImageEditorSerilization.MainPage"> <Grid> <imageeditor:SfImageEditor x:Name="imageeditor"> </imageeditor:SfImageEditor> </Grid> </ContentPage>
C#
public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); imageeditor.Source = ImageSource.FromResource("ImageEditorSerilization.Image.jpg"); Stream str = new System.IO.MemoryStream(); HeaderToolbarItem item = new HeaderToolbarItem(); HeaderToolbarItem item1 = new HeaderToolbarItem(); item.Text = "SaveEdit"; item1.Text = "LoadEdit"; imageeditor.ToolbarSettings.ToolbarItems.Add(item); imageeditor.ToolbarSettings.ToolbarItems.Add(item1); imageeditor.ToolbarSettings.ToolbarItemSelected += (sender, e) => { if (e.ToolbarItem is HeaderToolbarItem) if ((e.ToolbarItem as HeaderToolbarItem).Text == "SaveEdit") { str= imageeditor.SaveEdits(); imageeditor.Reset(); } else if ((e.ToolbarItem as HeaderToolbarItem).Text == "LoadEdit") { imageeditor.LoadEdits(str); } }; }
Sample link:
Screenshot: