Manual Image Crop on Xamarin.Forms using SkiaSharp [Part 2]
Implementing a 4 sided polygon actual cropping using SkiaSharp on Xamarin.Forms. Go to first part of this post if you don’t have the crop layer control yet 🥤🥤
Show me the code
Before the code you will need to install “SkiaSharp” and “SkiaSharp.Views.Forms” Nuget packages. We are going to use SKCanvasView to display the Cuphead image and to get the cropped bitmap specifying the coordinates.
Update MainPage.xaml with following code which added SKCanvasView and a pair of buttons.
On page code behind subscribe to SKCanvasView’s event PaintSurface. In this event handler you can access to canvas instance and draw a bitmap on it. Original bitmap (Cuphead) is loaded from resources by default.
On Crop button tapped we want to get corner coordinates from ManualCropView. Be sure to scale it using display density because coordinates given by ManualCropView are Xamarin Forms units, while SKCanvasView coordinates are pixels. Create a SKPath object and add a polygon using scaled coordinates.
Finally invalidate SKCanvasView surface so the canvas draw again the image, and this time our SKPath will be applied and cropped byte[] image saved.
DisplayCroppedButton simply will use the byte[] to display the cropped image on standard Image Xamarin.Forms control.
That’s all 🥤🥤
