How to crop an image based on the ratio in the image editor
This section explains how to crop the image with different cropping ratios without using default toolbar.
Step 1: Initialize the image editor and disable the default toolbar.
XAML
<editor:SfImageEditor x:Name="editor" ImageSource="Assets\AerialView.jpg"> <editor:SfImageEditor.ToolbarSettings> <editor:ToolbarSettings IsToolbarVisiblity="False"></editor:ToolbarSettings> </editor:SfImageEditor.ToolbarSettings> </editor:SfImageEditor>
Step 2: Populate the needed cropping ratios in a combo box.
Step 3: Upon selecting the ratio from the combo box you can enable the cropping by specifying the required ratios as a parameter in the ToggleCropping() method as shown in the below snippet.
C#
/// <summary>
/// Invoked when selection of the combo box gets changed.
/// </summary>
/// <param name="sender">Combo box</param>
/// <param name="e">event arguments</param>
private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (editor == null || !IsLoaded) return;
var combo = (sender as ComboBox);
if (combo.SelectedIndex == 0)
{
// Square
editor.ToggleCropping(1, 1);
}
else if (combo.SelectedIndex == 1)
{
// Original
editor.ToggleCropping(float.NaN, float.NaN);
}
else if (combo.SelectedIndex == 2)
{
// 3:2
editor.ToggleCropping(3, 2);
}
else if (combo.SelectedIndex == 3)
{
// 4:3
editor.ToggleCropping(4, 3);
}
else if (combo.SelectedIndex == 4)
{
// 5:4
editor.ToggleCropping(5, 4);
}
else if (combo.SelectedIndex == 5)
{
// 16:9
editor.ToggleCropping(16, 9);
}
}
Step 4: Now cropping preview will be enabled on the image with the specified ratio. To crop the preview, click on the crop button which uses the Crop() method as shown in the below code.
C#
/// <summary>
/// Invoked when crop button is clicked.
/// </summary>
/// <param name="sender">Crop button</param>
/// <param name="e">event arguments</param>
private void Crop_Click(object sender, RoutedEventArgs e)
{
editor.Crop(new Rect());
}
Step 5: To save the cropped image, use the save button which uses the Save() method and prompts you to pick a location to save the cropped image.
C#
/// <summary>
/// Invoked when save button is clicked.
/// </summary>
/// <param name="sender">Save button</param>
/// <param name="e">event arguments</param>
private void Save_Click(object sender, RoutedEventArgs e)
{
editor.Save();
}
Step 6: To cancel the cropping preview, use the cancel button which uses the ToggleCropping() method to cancel the cropping as shown in the below code.
C#
/// <summary>
/// Invoked when cancel button is clicked.
/// </summary>
/// <param name="sender">Cancel button</param>
/// <param name="e">event arguments</param>
private void Cancel_Click(object sender, RoutedEventArgs e)
{
editor.ToggleCropping();
}
Step 7: To retain the original image, click on the Reset button which resets all the editing done on the image using Reset() method.
C#
/// <summary>
/// Invoked when reset button is clicked.
/// </summary>
/// <param name="sender">Reset button</param>
/// <param name="e">event arguments.</param>
private void Reset_Click(object sender, RoutedEventArgs e)
{
editor.Reset();
}
Below screenshot depicts the cropping preview for 1:1 ratio.
Cropping preview:
Cropped image
Sample for cropping the image with different ratios can be referred here.
