Force Square cut

[Rudá Cunha]

Is it possible to force a square cut?

The user can not disable this.

[Mohana V]

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
 

[Padmini Ramamurthy]

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 

[Mohana V]

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

[Bernard]

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

[Michael Prabhu M]

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. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/IMAGEE~1-1138096400.zip 

 

Hope this helps. 

 

Thanks, 

Michael 

[Bernard]

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. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/IMAGEE~1-1138096400.zip 

 

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

[Michael Prabhu M]

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. 

 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/IMAGEE~3-84021998.zip 

 

Hope this helps. 

 

Thanks, 

Michael 

 

 

[Bernard]

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

[Dhanasekar R]

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