SfImageEditor: some issues and questions

[Matteo Comi]

Hello,

I have a couple of questions and issues on this control.

1. In one of my pages I hide footer toolbar and add a custom toolbaritem following your examples, and everything works fine. This is the only item in the toolbar, so I would like to automatically select it in order to avoid a tap for the user. How can I do it?
2. In another page I use the full control: it loads an image from the camera and then the user can edit the image. When the user tap the save button, the user can choose to take another picture or go back. Taking another picture works fine, but I have random problems on the edit, particularly if the user has selected the stroke thickness slider last (it throws a NullReferenceException). How can I deselect the item and restore the control as new?

Maybe I have another issue, but I need to investigate more.

Control version is 17.2.0.51.

Thanks in advance,

Matteo

[Vignesh Ramesh]

Hi Matteo, 

Greetings from Syncfusion. 

Query 1: I would like to automatically select it in order to avoid a tap for the user. How can I do it? 

We would like to inform that, currently SfImageEditor does not have support to select the Items by default without tapping on it. We have suspected that, you need to do some action while image get loaded. You can achieve this requirement by calling the required action methods in ImageLodadedEvent as like below snippet. 

[XAML]: 

… 

<ContentPage.Content> 

    <Grid> 

        <imageeditor:SfImageEditor x:Name="editor" 

                                   Source="{Binding Image}" 

                                   ImageSaved="editor_ImageSaved" 

                                   ImageLoaded="editor_ImageLoaded"/> 

    </Grid> 

</ContentPage.Content> 

… 

 

[C#]: 

… 

private void editor_ImageLoaded(object sender, ImageLoadedEventArgs args) 

{ 

    // Crop the image after it get load. 

    editor.Crop(new Rectangle(100, 100, 300, 400)); 

} 

… 

If your requirement is different from the above, revert us with more information about your requirement. This would help us to provide a better solution on this. 

Query 2: Selected the stroke thickness slider last (it throws a NullReferenceException) 

we have prepared SfImageEditor sample with the provided details and checked the reported crash by moved the slider last. But we afraid that, we are not able to reproduce the reported crash in our side. Can you please check with the tested sample and video in the following location? 

Tested sample link: https://www.syncfusion.com/downloads/support/forum/149272/ze/IESample-944678567  

Tested video link: https://www.syncfusion.com/downloads/support/forum/149272/ze/ImageEditorIssue120445958  

If still you are facing the problem, please revert us by modifying the sample based on your application along with replication steps, issue reproducing video, device configurations, etc. This would be helpful for us to give better solution in this. 

We have checked with the below configuration 

UWP: 

VS: Professional 2019, Version: 16.3.3 

OS: Windows 10, Version 1903 

Android: 

VS: Professional 2019, Version: 16.3.3 

Device: Samsung S8 plus 

API: 28 

iOS: 

VS: 2019, Version: 8.0.2  

MAC OS: 10.14.4 

XCode Version: 10.2 

Syncfusion Version: 17.2.0.51 

Query 3: How can I deselect the item and restore the control as new? 

Could you please confirm us whether your requirement is to hide the SubItems toolbar in UWP platform or like to reset the edits performed in a captured image when click the save toolbar button. If your requirement is different from this, please revert us with more information about your requirement. This would be helpful for us to give better solution in this.  

Regards, 

Vignesh. 

[Matteo Comi]

Hello,

thanks for your reply. Please find attached my sample generating the exception for Query 2.

Here's the exception:

11-25 10:50:04.600 I/MonoDroid(17097): UNHANDLED EXCEPTION:
11-25 10:50:04.605 I/MonoDroid(17097): System.NullReferenceException: Object reference not set to an instance of an object.

11-25 10:50:04.605 I/MonoDroid(17097):   at Syncfusion.SfImageEditor.Android.CustomToolbar.ShowSlider () [0x000d2] in <294e075d74bf426c96e1beb76d7200ea>:0
11-25 10:50:04.605 I/MonoDroid(17097):   at Syncfusion.SfImageEditor.Android.SfImageEditor.MenuItemClick (Syncfusion.SfImageEditor.Android.ToolbarItem item) [0x00411] in <294e075d74bf426c96e1beb76d7200ea>:0
11-25 10:50:04.605 I/MonoDroid(17097):   at Syncfusion.SfImageEditor.Android.SfImageEditor.OnToolbarMenuItemClicked (System.Object sender, Syncfusion.SfImageEditor.Android.ToolbarItemSelectedEventArgs args) [0x000a3] in <294e075d74bf426c96e1beb76d7200ea>:0
11-25 10:50:04.605 I/MonoDroid(17097):   at Syncfusion.SfImageEditor.Android.CustomToolbar+<>c__DisplayClass153_0.b__0 (System.Object sender, System.EventArgs args) [0x0003c] in <294e075d74bf426c96e1beb76d7200ea>:0
11-25 10:50:04.605 I/MonoDroid(17097):   at Android.Views.View+IOnClickListenerImplementor.OnClick (Android.Views.View v) [0x00011] in <8c07a09624c14764b43f6b946a5a1f23>:0
11-25 10:50:04.605 I/MonoDroid(17097):   at Android.Views.View+IOnClickListenerInvoker.n_OnClick_Landroid_view_View_ (System.IntPtr jnienv, System.IntPtr native__this, System.IntPtr native_v) [0x00011] in <8c07a09624c14764b43f6b946a5a1f23>:0
11-25 10:50:04.605 I/MonoDroid(17097):   at (wrapper dynamic-method) Android.Runtime.DynamicMethodNameCounter.28(intptr,intptr,intptr)
11-25 10:50:04.620 W/nyname.IESampl(17097): JNI RegisterNativeMethods: attempt to register 0 native methods for android.runtime.JavaProxyThrowable
11-25 10:50:04.625 D/Mono    (17097): DllImport searching in: '__Internal' ('(null)').
11-25 10:50:04.625 D/Mono    (17097): Searching for 'java_interop_jnienv_throw'.

11-25 10:50:04.625 D/Mono    (17097): Probing 'java_interop_jnienv_throw'.
11-25 10:50:04.625 D/Mono    (17097): Found as 'java_interop_jnienv_throw'.
**System.NullReferenceException:** 'Object reference not set to an instance of an object.'

11-25 10:50:16.800 E/mono    (17097): Unhandled Exception:
11-25 10:50:16.800 E/mono    (17097): System.NullReferenceException: Object reference not set to an instance of an object.

11-25 10:50:16.800 E/mono    (17097):   at (wrapper dynamic-method) Android.Runtime.DynamicMethodNameCounter.28(intptr,intptr,intptr)
11-25 10:50:16.800 E/mono    (17097):   at (wrapper native-to-managed) Android.Runtime.DynamicMethodNameCounter.28(intptr,intptr,intptr)
11-25 10:50:16.800 E/mono-rt (17097): [ERROR] FATAL UNHANDLED EXCEPTION: System.NullReferenceException: Object reference not set to an instance of an object.
11-25 10:50:16.800 E/mono-rt (17097):   at (wrapper dynamic-method) Android.Runtime.DynamicMethodNameCounter.28(intptr,intptr,intptr)
11-25 10:50:16.800 E/mono-rt (17097):   at (wrapper native-to-managed) Android.Runtime.DynamicMethodNameCounter.28(intptr,intptr,intptr)

In the example, inside the method editor_ImageLoaded, I wrote a comment of what I would like to achieve for Query 1.

To give you more information, I updated SfImageEditor control to version 17.3.0.28 and the issue still persists. With this version, unfortunately, the binding of the image seems broken because it is not displayed anymore after the second take of the picture.

Attachment: IESample_8fd061ce.zip

[Vignesh Ramesh]

Hi Matteo, 

Thanks for your response. 

Query 1: I would like to automatically select it in order to avoid a tap for the user. How can I do it?  

As we said in our previous update, currently SfImageEditor does not have support to select the Items by default without tapping on it. So, you can achieve your requirement by calling AddShape() methods of SfImageEditor in ImageLoaded Event as like below snippet. 

[C#]: 

… 

private void editor_ImageLoaded(object sender, ImageLoadedEventArgs args) 

{ 

    // I need the toolbar updates and the control selects automatically the Path button and its subitems become active 

    // This way the user can start to draw on the image as it is loaded 

    // Is it possible? 

    editor.AddShape(ShapeType.Path); 

} 

… 

You can directly start draw the path, also the Path’s subitems get displayed when started to draw. 

Query 2: Selected the stroke thickness slider last (it throws a NullReferenceException)  

We can reproduce the reported crash in the provided sample. Also, we have internally logged a defect report on this, and the fix will be included in our upcoming weekly NuGet release. We appreciate your patience until then.  

Also you can overcome this problem by calling AddShape() method in ImageLoadedEvent. You can continue this workaround until our next Weekly NuGet release. 

Query 4: the binding of the image seems broken because it is not displayed anymore after the second take of the picture 

We have analyzed the provided sample, in that you didn’t inherited the AddPhotoViewModel from INotifyPropertyChanged. Also, you have bind the Immagine property of Modello with Source Property of SfImageEditor and set the captured ImageStream to both SfImageEditor’s Source property and Modello’s Immagine, then binding not get works properly. So, we have removed the redundant Source setting codes. 

Also, you can overcome this issue by load the second image directly without reset the old image loaded in the SfImageEditor as like the below snippet. 

[C#]: 

… 

if (await DisplayAlert("Title", "Add another image?", "OK", "KO")) 

{ 

    //Syncfusion.SfImageEditor.XForms.ToolbarItem toolbarItem = editor.ToolbarSettings.ToolbarItems.Where(w => w.Name == "Reset").FirstOrDefault(); 

    //ToolbarSettings_ToolbarItemSelected(null, new ToolbarItemSelectedEventArgs(toolbarItem)); 

    Modello.SetNomeFile(); 

 

    MediaFile file = await CrossMedia.Current.TakePhotoAsync( 

        new StoreCameraMediaOptions 

        { 

… 

Please find the modified sample from the below link. 

https://www.syncfusion.com/downloads/support/forum/149272/ze/IESample1686792862 

Please let us know if you have any queries. 

Regards, 

Vignesh.

[Matteo Comi]

Hello,

thanks for your reply.

Query 1:

What if I don't have an image to load and the control is empty?

Query 2:

The workaround seems to work, thank you very much. I will wait for the update via nuget.

Thanks in advance,

Matteo

[Rachel A]

Hi Matteo, 

 

Thanks for your response. 

 

Query: What if I don't have an image to load and the control is empty? 

Instead of adding AddShape from ImageLoaded event, you can call it from OnAppearance method of page which containing SfImageEditor with some delay as like below snippet. 

 

[C#]: 

In ImageEditorGettingStarted.xaml.cs 

… 

protected override void OnAppearing() 

{ 

    base.OnAppearing(); 

 

    this.PreselectPath(); 

 

    MessagingCenter.Subscribe<AddPhotoViewModel>(this, "DisplayAlertMessage", async (sender) => 

… 

private async void PreselectPath() 

{ 

    await Task.Delay(1500); 

    editor.AddShape(ShapeType.Path); 

} 

… 

 

Please find the modified sample from the below link. 

https://www.syncfusion.com/downloads/support/forum/149272/ze/IESample_Modified-865983041 

 

Regards, 

Rachel. 

[Matteo Comi]

Thank you very much.

Matteo

[Rachel A]

Hi Matteo, 

 

Thank you for the update. 

 

Regards, 

Rachel. 

[Matteo Comi]

Hello,

today I started testing my application on a real iPhone and I found a problem with this control.

If I navigate to a page with SfImageEditor using a Master/Detail navigation pattern, I am not able to draw any line on the image: whenever I move my finger to draw a line or expand a shape the burger menu comes in. How can I solve this issue?

SfImageEditor version 17.2.0.51

Xamarin Forms version 4.3.0.991211

iPhone 7, iOS version 13.2.3

Thanks in advance,

Matteo

[Rachel A]

Hi Matteo, 

 

We have provided solution for the mentioned problem in the below KB article link. 

 

https://www.syncfusion.com/kb/9634/how-to-avoid-crop-sluggishness-in-masterdetailpage 

 

Thanks, 

Rachel. 

[Matteo Comi]

Thanks Rachel, I will look at that article.

[Rachel A]

Hi Matteo, 

 

Thank you for the response. 

 

Regards, 

Rachel. 

[Matteo Comi]

Hello,

I have another problem with this control and UWP.

Please run the attached sample: click on the label at the bottom of the page and start drawing something in the opened pop-up page, then click save. App crashes. Is there something I am doing wrong?

Thanks in advance,

Matteo

Attachment: Sample_4014af4b.zip

[Rachel A]

Hi Matteo, 

 

We have checked the provided sample and the crash is not thrown from SfImageEditor. It occurs due to the code that you have written to create png file, saving the current stream into it and popping the page. If we removed that file creating and saving codes, then sample is working without any crash. Please revert to us if you face any problems with SfImageEditor.  

 

Regards, 

Rachel. 

[Matteo Comi]

Hello Rachel,

thanks for your reply. I will look into it.

Another issue: I updated my iPad to OS version 13.2.3. If I take a picture in portrait mode and save it as stream into SfImageEditor (following the sample provided in one of my previous post) it is always rotated 90 degrees. Can you please check if it is a problem of my code or one of your issue?

Thanks in advance,

Matteo

[Rachel A]

Hi Matteo, 

We have created the KB article to avoid the image changing orientation while saving it, follow the link below. 

https://www.syncfusion.com/kb/9632/how-to-resolve-image-rotated-when-loading-image-after-saving-image-in-ios-device 

Thanks, 

Rachel. 

[Matteo Comi]

Thanks Rachel,

your feedbacks helped me solve those issues.

Now I come back with another question: when I take a picture and load it in the control, especially on Android devices it takes some time to load and become visible. How can I disable toolbar items while the image gets loaded?

Thanks in advance,

Matteo

[Vignesh Ramesh]

Hi Matteo, 

Thanks for your response. 

As we have said in our earlier update, SfImageEditor having ImageLoaded event. So, you can achieve your requirement by disabling the Toolbar Items by SetToolbarItemVisibility method from the ImageLoaded event of SfImageEditor. Please find the snippet from below. 

[XAML]: 

… 

<imageeditor:SfImageEditor x:Name="editor" ImageLoaded="editor_ImageLoaded"/> 

… 

 

[C#]: 

… 

private void editor_ImageLoaded(object sender, ImageLoadedEventArgs args) 

{ 

    editor.SetToolbarItemVisibility("undo, redo", false); 

} 

… 

 

Please refer the below User Guide link for more information. 

ImageLoaded event :  https://help.syncfusion.com/xamarin/image-editor/save#imageloaded-event 

SetToolbarItemVisibility : https://help.syncfusion.com/xamarin/image-editor/toolbarcustomization#to-hideshow-the-toolbar-item 

If your requirement is different from this, please provide additional information about your requirement. This would be helpful for us to give better solution. 

Regards, 

Vignesh. 

[Matteo Comi]

Thank you very much!

Matteo

[Ramya Soundar Rajan]

Hi Matteo, 

 

Thanks for your response. 

 

Regards, 

Ramya. 

[Masood]

HI Vignesh, 
i want to know, how can we hide or remove the mage editor once we are done with the editing and saved the image, like the editor will take the whole page and all other controls will go hide behind image editor, I want to hide the editor or bring those control back on the page once i saved the image via editor 
thanks in advance 

[Ramya Soundar Rajan]

Hi Masood, 

 

We would like to suggest that you can hide the SfImageEditor control by disabling the IsVisible property as like in below code. 

 

imageEditor.IsVisible = false; 

 

Or 

 

You can remove the SfImageEditor control from the parent view as like in below code. 

 

grid.Children.Remove(imageEditor);// For example if you have added image editor inside grid 

 

Regards, 

Ramya S