How to integrate SfImageEditor into an app

[Reza]

I am looking for some guidance on how to integrate SfImadeEditor into an app. After playing around with this control, it looks like it should be in a ContentPage alone as you can't put it in a StackLayout within an entire page. What I am trying to do is load an image from the phone photo gallery, let the user crop only the profile picture and display it in an app profile screen.

So the workflow is:    Profile Page --> User Clicks the Image --> Image is picked from the photo gallery --> Immediately the ImageEditor is shown to crop the picture into a square --> Cropped image is displayed in the Profile Page.

In my attached sample, in the MainPage I have the load photo from the photo gallery method, and then a second page called CropImagePage which is the SfImageEditor. I am unclear how to incorporate the SfImageEditor here such that the photo loaded from the gallery is sent to the SfImageEditor to crop and then returned back to the MainPage for display. Should it all be in one page, does it need to be a control, etc? Can you provide some help with this, please?

[Reza]

Attaching the project here. ImageLoadAndCrop can be ignored in the entire project.

Also, how do you fill out the image in the editor, I am seeing a lot of space around the image.

Attachment: ImageCropper_Feb23_1d0d93a6.zip

[Reza]

Further, with the iOS version, it looks like the cropping area (black background) does not cover the entire image. This may be a separate bug from the primary question I have posted on this thread. SfImageEditor issue

[Hemalatha Marikumar]

Hi Reza Mohamed, 

 

Greetings from Syncfusion. 

 

Case 1: How do you fill out the image in the editor 

 

At present, we have provided a fit option once the image has been cropped mainly to maintain the quality of the image. That's why you only have that extra space on the cropped image. If you filled to entire page, quality on cropped image will be missed. 

 

Case 2: Cropping area (black background) does not cover the entire image 

 

We have faced this issue only when without having the HeaderToolbar. Currently we are validating  the issue and we will update the complete details on February 27,2020. 

 

Regards, 

Hemalatha M. 

 

[Reza]

My primary question is still unanswered. Please review the first post on this thread where i am asking how to implement the imageditor in my required scenario:

Profile Page --> User Clicks the Image --> Image is picked from the photo gallery --> Immediately the ImageEditor is shown to crop the picture into a square --> Cropped image is displayed in the Profile Page.

[Ramya Soundar Rajan]

Hi Reza Mohamed,  

 

Query 1: Profile Page --> User Clicks the Image --> Image is picked from the photo gallery --> Immediately the ImageEditor is shown to crop the picture into a square --> Cropped image is displayed in the Profile Page. 

 

You can achieve this requirement by invisible the image after image clicked and enable the SfImageEditor visibility with loaded image picked from gallery. After the image cropped, hide the SfImageEdior to show the image by visible Image view. 

 

Query 2: Cropping area (black background) does not cover the entire image 

 

We have considered “SfImageEditor cropping rectangle not positioned properly” as an issue. We will provide the patch on 12^th March 2020.  

  

You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

  

Feedback link:  https://www.syncfusion.com/feedback/12409  

  

Note: The provided feedback link is private, and you need to login to view this feedback.  

 

Regards, 

Ramya S