SfImageEditor to image control

[Derek Hagen]

We are using an SfImageEditor and then saving the value we get back from SaveEdits and then converting that to a string and saving that value to the database.  On a different page we want to load that value into an Image control.  How can we do that?

var tmp = editor.SaveEdits();

var length = tmp.Length;

using (var sr = new StreamReader(tmp))

       this.JSON = sr.ReadToEnd();

So JSON is what we save to our database.  How can I later on use that value and load the image into an Image control?

[Bharathiraja K]

Hi Derek, 

 

Greetings from Syncfusion. 

 

We can get the saving image value as stream by using the ImageSaving event in the SfImageEditor. Also, we can serialize the edited shape and get edited shapes as stream by using the SaveEdits method in SfImageEditor. This method used to serialize the shapes and we can load the serialized stream by using the LoadEdits method. 

 

We would like to suggest ImageSaving event to get the stream of the saved image instead of using the SaveEdits event. 

 

Please refer the following UG link for your reference. 

https://help.syncfusion.com/xamarin/sfimageeditor/save#imagesaving 

 

Please refer the below help document to know more about the ImageEditor Serialization behavior. 

https://help.syncfusion.com/xamarin/sfimageeditor/serialization 

 

We have prepared the sample for getting stream from ImageSaving event. In the sample MainPage, click the “Save” icon to get the stream from the ImageEditor_Saving event then navigate the second page and load the image from the saved stream by clicking the “LoadImage” button. 

 

Please refer the sample for your reference. 

Sample: http://www.syncfusion.com/downloads/support/forum/143158/ze/Sample-210804958.zip 

 

Regards, 

Bharathi. 

[Derek Hagen]

Hi Derek, 

 

Greetings from Syncfusion. 

 

We can get the saving image value as stream by using the ImageSaving event in the SfImageEditor. Also, we can serialize the edited shape and get edited shapes as stream by using the SaveEdits method in SfImageEditor. This method used to serialize the shapes and we can load the serialized stream by using the LoadEdits method. 

 

We would like to suggest ImageSaving event to get the stream of the saved image instead of using the SaveEdits event. 

 

Please refer the following UG link for your reference. 

https://help.syncfusion.com/xamarin/sfimageeditor/save#imagesaving 

 

Please refer the below help document to know more about the ImageEditor Serialization behavior. 

https://help.syncfusion.com/xamarin/sfimageeditor/serialization 

 

We have prepared the sample for getting stream from ImageSaving event. In the sample MainPage, click the “Save” icon to get the stream from the ImageEditor_Saving event then navigate the second page and load the image from the saved stream by clicking the “LoadImage” button. 

 

Please refer the sample for your reference. 

Sample: http://www.syncfusion.com/downloads/support/forum/143158/ze/Sample-210804958.zip 

 

Regards, 

Bharathi. 

I getting an unhandled exception when doing the following:

editor = new SfImageEditor()

            {

            };

var str = new System.IO.MemoryStream(Encoding.UTF8.GetBytes(json));

editor.LoadEdits(str);  //error occurs calling this.

The error I get "Java.Lang.IllegalArgumentException: width and height must be > 0"

I have attached my json file that is being sent.
I am on 16.4.0.54 for sfImageEditor

Attachment: myJson_b371af4.zip

[Derek Hagen]

If I try and do a LoadEdits and then a SaveEdits then SaveEdits returns null.

var str = new System.IO.MemoryStream(Encoding.UTF8.GetBytes(json));

editor.LoadEdits(str);

var ss = editor.SaveEdits();

If I change editor.SaveEdits() to be editor.Save() then the ImageSaving event does not fire.

Essentially all I am trying to do is use my json string and convert that to an image and then load that into an image control.  My json string is in my prior comment.

[Derek Hagen]

Hi Derek, 

 

Greetings from Syncfusion. 

 

We can get the saving image value as stream by using the ImageSaving event in the SfImageEditor. Also, we can serialize the edited shape and get edited shapes as stream by using the SaveEdits method in SfImageEditor. This method used to serialize the shapes and we can load the serialized stream by using the LoadEdits method. 

 

We would like to suggest ImageSaving event to get the stream of the saved image instead of using the SaveEdits event. 

 

Please refer the following UG link for your reference. 

https://help.syncfusion.com/xamarin/sfimageeditor/save#imagesaving 

 

Please refer the below help document to know more about the ImageEditor Serialization behavior. 

https://help.syncfusion.com/xamarin/sfimageeditor/serialization 

 

We have prepared the sample for getting stream from ImageSaving event. In the sample MainPage, click the “Save” icon to get the stream from the ImageEditor_Saving event then navigate the second page and load the image from the saved stream by clicking the “LoadImage” button. 

 

Please refer the sample for your reference. 

Sample: http://www.syncfusion.com/downloads/support/forum/143158/ze/Sample-210804958.zip 

 

Regards, 

Bharathi. 

You example source doesn't appear to work for me.  This is the steps I use

1) start the application
2) draw over the image with the tools

3) on the lower right click on "SaveEdit"

4) click on Navigate
5) click on LoadImage

The screen is blank.

[Bharathiraja K]

Hi Derek, 

 

Sorry for the inconvenience caused. We have modified the sample. In that, please follow the below steps. 

 

1) Start the application
2) Draw over the image with the tools 

3) On the top right click on "Save" button 

4) Now click on Navigate
5) New page loaded. Click on LoadImage button. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/143158/ze/Sample-1277419173.zip  

 

Regards, 

Bharathi. 

[Derek Hagen]

Hi Derek, 

 

Sorry for the inconvenience caused. We have modified the sample. In that, please follow the below steps. 

 

1) Start the application
2) Draw over the image with the tools 

3) On the top right click on "Save" button 

4) Now click on Navigate
5) New page loaded. Click on LoadImage button. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/143158/ze/Sample-1277419173.zip  

 

Regards, 

Bharathi. 

Thanks for the new example but this is not what I am trying to do.  As I tried to explain above.  I have modified your example with what I am trying to do and attached:

1) Draw a smiley face over the image that loads.
2) Click SAVEEDITS
3) Click NAVIGATE2

At this point we get an unhandled exception:

Java.Lang.IllegalArgumentException: width and height must be > 0

Version info:

Microsoft Visual Studio Professional 2017 

Version 15.9.3

VisualStudio.15.Release/15.9.3+28307.145

Microsoft .NET Framework

Version 4.7.03056

Installed Version: Professional

Xamarin   4.12.3.73 (d15-9@20b35b881)

Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.

Xamarin Designer   4.16.5 (6b9f32067)

Visual Studio extension to enable Xamarin Designer tools in Visual Studio.

Xamarin Templates   1.1.127 (e975299)

Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK   9.1.0.38 (HEAD/61d16aa23)

Xamarin.Android Reference Assemblies and MSBuild support.

Xamarin.iOS and Xamarin.Mac SDK   12.2.1.11 (5ef73d3)

Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.

Attachment: Sample2_d9f720a4.zip

[Bharathiraja K]

Hi Derek, 

 

We have provided solution for the same query in your Direct Track incident. Please login with the below URL to check out the solution for your query. 

 

http://www.syncfusion.com/support/directtrac/incidents  

 

Regards, 

Bharathi.