1. Home
  2. Forum
  3. Xamarin.Forms
  4. Force Square cut

Force Square cut

Is it possible to force a square cut?
The user can not disable this.

9 Replies
MV Mohana V Syncfusion Team April 23, 2018 07:40 AM UTC

Hi Rudá, 

Thanks for contacting syncfusion support. 

We can achieve your requirement to force only square cut for cropping with the help of image editor "SetToolbarItemVisibility()" method. By using this method, we can disable other cropping aspect ratio and can keep only "Square" cut ratio. 

We have created simple sample to showcase how to achieve this using "SetToolbarItemVisibility()", 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/squareratio1956117025 

Screenshot:  
  
 
  
We can also achieve this without our toolbar in your application with the help of "ToggleCropping()" method and please get the below sample for the same, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Togglecropping-946354153 

Screenshot:
 
  
  
Please get back us, if you need any further assistance from our side. 

Regards,
Mohana V
 


PR Padmini Ramamurthy Syncfusion Team April 23, 2018 11:07 AM UTC

From: Rudá Cunha
Sent: Monday, April 23, 2018 6:58 AM
To: Syncfusion Support <[email protected]>
Subject: Re: Syncfusion support community forum 137162, Force Square cut, has been updated. 

In fact, what I want is for the user to make a square cut, so that the photo is always sent in that format. 

Att,  
Rudá Cunha 


MV Mohana V Syncfusion Team April 24, 2018 07:07 AM UTC

Hi Rudá,

In our earlier update we have provided solution to force square cut in an image in terms of cropping with the help of square aspect ratio feature in our image editor, if this is not your requirement, can you be more specific on your requirement with more details on what you are trying to accomplish, with help of any illustrations etc. So that it will be helpful for us to provide you a better solution.

Regards,
Mohana V

BE Bernard August 20, 2018 02:32 PM UTC

Morning,

I've implemented your second solution (Togglecropping-946354153 ) which works great on iOS. It shows the original picture with a square crop area on top of it. The crop button at the bottom allows me to crop and save the picture and thus return a square image. Great!

However, when I run the same code on Android (both v6.0 & 8.1.0) I only get the picture but no square crop area. Pressing the Crop button gives a 'Object reference not set to an instance of an object.' exception on the line 'editor?.Crop();'. 

How can I force the crop area on Android and make this work?

Ps: Code attached


Attachment: CropPage_ab679db5.zip

MP Michael Prabhu M Syncfusion Team August 21, 2018 11:02 AM UTC

Hi Bernard, 
 
Greetings from Syncfusion, we have analyzed your query and this issue occurs in Android because the ToggleCropping is called with a time delay in the sample to ensure that the image is loaded first and then the cropping Rect will appear. If the image is not loaded within the time the Crop Rect will not appear.  
 
So, to overcome this we have provided a new event called ImageLoaded from our latest release 16.2 versions, this event will trigger only after the image is loaded in to the editor and then you can call ToggleCropping to show Cropping rect on the top of the image.  
 
Based on this we have prepared a sample and it can be downloaded from the below link. 
 
 
Hope this helps. 
 
Thanks, 
Michael 



BE Bernard replied to Michael Prabhu M August 21, 2018 04:31 PM UTC

Hi Bernard, 
 
Greetings from Syncfusion, we have analyzed your query and this issue occurs in Android because the ToggleCropping is called with a time delay in the sample to ensure that the image is loaded first and then the cropping Rect will appear. If the image is not loaded within the time the Crop Rect will not appear.  
 
So, to overcome this we have provided a new event called ImageLoaded from our latest release 16.2 versions, this event will trigger only after the image is loaded in to the editor and then you can call ToggleCropping to show Cropping rect on the top of the image.  
 
Based on this we have prepared a sample and it can be downloaded from the below link. 
 
 
Hope this helps. 
 
Thanks, 
Michael 



Dear Michael, 

Thank you for your feedback. Today, I got a step further as the crop area is now indeed showing in Android. Great!  
Unfortunately, on Android, the image stream of bytes returned when trying to save is just a black square. On iOS it works fine.

So, what did I do? Well, I adapted my code by adding the  ImageLoaded event. However, for iOS the event is never called (bug?) so I had to leave the 'await Task.Delay(1000);' and editor?.ToggleCropping(1, 1);' code in the constructor. Doing this makes sure that both in iOS and Android I get an image and a crop area. So, this is progress.

The custom created crop button at the bottom calls a method which crops and saves the image when tapped. 
The 'ImageSaving' event methods handles the capturing of the Stream bytes[].

For iOs this works perfectly well and I am able to get the cropped images bytes via the stream. On Android however, the returned byte stream is a black square.  

So, how can I make this to work for Android. Attached my code for your review.

Thanks,
Bernard

Attachment: CropPage_20180821_83f1c092.zip

MP Michael Prabhu M Syncfusion Team August 23, 2018 07:02 AM UTC

Hi Benard, 
 
Thanks for the update. 
 
We have tested your scenario and we can able to reproduce this when we save the image after cropping. Since we were invoking two threads at the same time for crop and save, crop thread will be disposed. So, can you include the following line to resolve this issue.  
 
editor.Crop();
Device.BeginInvokeOnMainThread(() =>
{
   editor.Save();
}); 
 
Also, we have modified the sample and find the sample from below location. 
 
 
Hope this helps. 
 
Thanks, 
Michael 
 
 



BE Bernard August 23, 2018 08:30 AM UTC

Brilliant! 
All is working and I am now able to crop an image to a fixed shape in a very simple way for both iOS and Android. Thanks!

Let me know when the ImageLoaded event is fixed for iOS so I can remove the ToggleCropping from the constructor. 

Cheers,
Bernard

DR Dhanasekar R Syncfusion Team August 24, 2018 10:09 AM UTC

Hi Benard,

Thanks for your update.

We will include the bug "ImageLoaded event is not fired in iOS" in our upcoming volume 3 release which is scheduled to be rolled out at the end of September, 2018.

Regards,
Dhanasekar

Loader.
Up arrow icon