We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfImageEditor to image control

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?

7 Replies

BK Bharathiraja K Syncfusion Team March 7, 2019 09:21 AM UTC

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. 
 
Please refer the below help document to know more about the ImageEditor Serialization behavior. 
 
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. 
 
Regards, 
Bharathi. 



DH Derek Hagen replied to Bharathiraja K March 7, 2019 02:23 PM UTC

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. 
 
Please refer the below help document to know more about the ImageEditor Serialization behavior. 
 
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. 
 
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


DH Derek Hagen March 7, 2019 10:37 PM UTC

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.


DH Derek Hagen replied to Bharathiraja K March 8, 2019 12:37 AM UTC

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. 
 
Please refer the below help document to know more about the ImageEditor Serialization behavior. 
 
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. 
 
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.


BK Bharathiraja K Syncfusion Team March 8, 2019 07:32 AM UTC

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.
 
 
 
Regards, 
Bharathi. 



DH Derek Hagen replied to Bharathiraja K March 8, 2019 03:39 PM UTC

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


BK Bharathiraja K Syncfusion Team March 11, 2019 11:47 AM UTC

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. 
 
 
Regards, 
Bharathi.  


Loader.
Up arrow icon