How to get the rounded image source or bitmap image for cropping image in elliptical shape in UWP

user_11914745 0
Viewed 92

I need to crop the image in elliptical shape, but I do not want to use Ellipse and fill with ImageBrush as mentioned in this link , instead I need the bitmap itself to be in rounded / elliptical instead of rectangular.

Sometimes I would like to crop in rectangular and sometimes in elliptical, so I cannot use Ellipse and fill.

Is there any alternative solution to this? It would also be better if I can clip the Image in elliptical format.

But the Clip in Image accepts only RectangleGeometry.

win2d uwp crop image xaml
1 Answers

you can create a custom UserControl and in that use win2d CanvasControl to display image where you can draw image in any shape that you want, using "CreateLayer" funtion to mask the drawing image with shape. for example

at xaml:

<UserControl
    x:Class="UWPClassLib.MyImageControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPClassLib"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:win2d="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d">
    <win2d:CanvasControl x:Name="w2dCanvas"
                         Draw="w2dCanvas_Draw" />
</UserControl>

at code behind :

public enum MaskShape
{
    rectangle,
    circle
}

public sealed partial class MyImageControl : UserControl
{
    public WriteableBitmap Bitmap
    {
        get { return (WriteableBitmap)GetValue(BitmapProperty); }
        set { SetValue(BitmapProperty, value); }
    }

    public static readonly DependencyProperty BitmapProperty = DependencyProperty.Register(nameof(Bitmap), typeof(WriteableBitmap), typeof(MyImageControl), new PropertyMetadata(null, OnBitmapPropertyChanged));

    private static void OnBitmapPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var myctrl = (MyImageControl)d;
        myctrl.TryCreateResource();
    }

    public MaskShape Shape
    {
        get { return (MaskShape)GetValue(ShapeProperty); }
        set { SetValue(ShapeProperty, value); }
    }

    public static readonly DependencyProperty ShapeProperty = DependencyProperty.Register(nameof(Shape), typeof(MaskShape), typeof(MyImageControl), new PropertyMetadata(MaskShape.circle));

    private CanvasBitmap Source;

    public MyImageControl()
    {
        this.InitializeComponent();
    }
    
    public void Invalidate()
    {
        w2dCanvas.Invalidate();
    }
    private void w2dCanvas_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
    {
        using (var session = args.DrawingSession)
        {
            session.Clear(Colors.Transparent);
            if (CheckResourceCreated())
            {
                using (var mask = GetMaskShape())
                using (var layer = session.CreateLayer(1.0f, mask))
                {
                    session.DrawImage(Source);
                }
                // either you can do that or can use
                // session.FillGeometry(mask, imagebrush); //and image brush can be made from source e.g.
                // imagebrush  = new CanvasImageBrush(w2dCanvas, Source);
            }
        }
    }

    private CanvasGeometry GetMaskShape()
    {
        switch (Shape)
        {
            default:
            case MaskShape.circle:
                var center = new System.Numerics.Vector2((float)this.ActualWidth / 2, (float)this.ActualHeight / 2);
                var radiusX = (float)this.ActualWidth / 2;
                var radiusY = (float)this.ActualHeight / 2;
                return CanvasGeometry.CreateEllipse(w2dCanvas, center, radiusX, radiusY);

            case MaskShape.rectangle:
                return CanvasGeometry.CreateRectangle(w2dCanvas, new Rect(0, 0, this.ActualWidth, this.ActualHeight));
        }
    }

    private bool CheckResourceCreated()
    {
        if (Source == null)
        {
            TryCreateResource();
        }
        return (Source != null);
    }

    private void TryCreateResource()
    {
        try
        {
            if (Bitmap == null)
                return;

            Source = CanvasBitmap.CreateFromBytes(w2dCanvas, Bitmap.PixelBuffer.ToArray(), Bitmap.PixelWidth, Bitmap.PixelHeight, DirectXPixelFormat.B8G8R8A8UIntNormalized);
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex.Message);
        }
    }
}

and now you can use it any where to display image in rectangle or circle. you just have to change MaskShape and call invalidate plese forgive any error since, i wrote it on the go and haven't test it. its just for an idea

user_83497200
Related