The official R3 2019 release of Telerik UI for Xamarin is here and it’s a perfect time to draw your attention to a couple of handy features added to the Image Editor control for Xamarin.
We love to listen: We have received a number of feature requests about providing different shapes for the ImageEditor Crop tool, as well as the ability to Save the edited image with a specific scale factor. And here we are! Those features are now part of the image editor features set.
Let’s take a look at the listed features above.
The image crop tool allows you to crop an image using predefined aspect-ratios and crop geometries, or you can create a custom one.
The Crop Toolbar Item has properties which help you specify the geometry of the crop selection and the desired aspect ratios. We have added circular and fixed-ratio crop, including some of the most popular crop rations like 3:2, 4:3, 16:9. More details can be found in our help article.
Here is how the Pre-Defined Crop Feature looks:
And the custom one:
In addition, the control also features a unique, easy-to-use, intelligent crop switch, depending on the touch location. Whenever the touch location defines a rectangle with swapped width/height ratio, the resize adorner will switch, so you automatically get the alternative crop rectangle, thus quickly and easily switching from landscape to portrait crop and vice-versa.
With RadImageEditor you have the option to save the currently edited image. The new API which we have exposed allows you to save images with a specific scale factor or with a maximum size, and also allows you to handle large images and save them to a size which corresponds to your app needs.
These scenarios can be achieved through the SaveAsync method and its overloads.
You can find more information about Saving Images here.
Let's create a sample demo using a circle as a crop geometry and save the edited image with high quality.
For the purpose of the demo the .jpg file is added to each application project. You could load images from File, Uri, Stream, Resources
Here is a sample definition of the RadImageEditor:
As we want to crop our image in a circle shape then we should add RadImageEditorToolbar with the desired crop definition:
You can find more information about this here.
Now let's use the saving APIs: For example, we can use ImageEditorToolbar - CommandToolbarItem an on it to implement a saving option.
Here is the final result:
Feel free to drop us a comment below sharing your thoughts. We would love to hear what you think about the Xamarin Forms Image Editor control and its features. If you have any ideas for features to add, please do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.
If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trial, offering all the functionalities and controls at your disposal at zero cost.
Allow your app to Edit and Save images with ImageEditor for Xamarin.Forms :)
Dobrinka Yordanova is a Technical Support Engineer, part of the Progress Telerik UI for Xamarin & UWP team in Sofia, Bulgaria. She holds a master's degree in Computer Systems and Technologies. Her passion is traveling around the world and exploring multicultural environments. In her spare time she likes making sushi, playing console games and hanging out with friends.
Subscribe to be the first to get our expert-written articles and tutorials for developers!