Add ellipse to the image and save it


  • I have written a code in Windows 8.1 app  to crop a picture and save it using the tutorial


    Now i want to edit the picture adding shapes like Ellipse on the picture. For that i created an ellipse

    var Circle = new Ellipse                                 {                Height = 50,                Width = 50,                Fill = brush,                RenderTransform = new CompositeTransform(),            };

    and  add it in canvas which contain my above picture loaded from computer as:

    I can see the ellipse loaded in my original pic but when saving only my original picture is saved(not with ellipse).I want to edit picture embedding the ellipse into my original picture. How can i do it?


    Wednesday, October 8, 2014 10:50 AM


  • You will have to render the Canvas to a RenderTargetBitmap. It has a RenderAsync method that you provide the Canvas to which will result to the Canvas contents being stored in the RenderTargetBitmap. You then would save the RenderTargetBitmap as the new Image (see: http://msdn.microsoft.com/library/windows/apps/dn298548).

    Another approach would be to download the WriteableBitmapEx Nuget Package to your solution. You would then load your image into the WriteableBitmap and the extension methods contained in WriteableBitmapEx will allow you to directly draw Ellipses, Texts, etc. to the WriteableBitmap. You can store the WriteableBitmap as your new image once you're finished.

    Wednesday, October 8, 2014 11:16 AM