How to save drawn ellipse over canvas as an image - Windows RT

Question

I've drawn ellipse over canvas, now how can I save it as an image. I know you cannot directly save canvas as an image and neither you can take screenshot. I am working in C#/xaml. Below is my code for drawing ellipse over canvas.

private void canvasDraw_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        if (drawing)
        {
            PointerPoint current = e.GetCurrentPoint((UIElement)sender);
           // Line line = new Line() { X1 = start.Position.X, Y1 = start.Position.Y, X2 = current.Position.X, Y2 = current.Position.Y };
            //line.Stroke = new SolidColorBrush(Colors.Black);
            Ellipse circle = new Ellipse();
            circle.SetValue(Canvas.LeftProperty, current.Position.X);
            circle.SetValue(Canvas.TopProperty, current.Position.Y);
            circle.Height = 20;
            circle.Width = 20;
            circle.Fill = currentBrush;
            circle.Opacity = 0.7;
            circle.SetValue(Canvas.ZIndexProperty,1);
            canvasDraw.Children.Add(circle);

        }
    }

Edit : I am able to save the image by using InkManager. I stored every Ellipse in inkmanager and called SaveAsync method but the final issue is the image comes in black for example if I draw red ellipse the saved image has black ellipse.

Duplicate of http://stackoverflow.com/questions/1468590/how-can-i-convert-a-wpf-control-into-an-image ??? — Nayan, Mar 20 '13 at 18:44
I think you need to clarify your tags here. Instead of `wpf` and `xaml`, maybe you mean `winrt-xaml`? Instead of `windows-rt`, maybe you mean `windows-runtime`? — chue x, Mar 20 '13 at 19:18
That is not a duplicate question of the above one as it's for win-rt not wpf — iC7Zi, Mar 20 '13 at 19:33
You can check this answer to a related question http://stackoverflow.com/questions/11627830/creating-bitmap-image-from-xaml-control-using-writablebitmapex/13020721#13020721 — Filip Skakun, Mar 21 '13 at 00:13
You are the man, love you. I am able to do this with the help of your toolkit. — iC7Zi, Mar 21 '13 at 12:07
WriteableBitmapExtensions.DrawEllipse(bitmap, (int)current.Position.X, (int)current.Position.Y, 0, 0, currentBrush.Color); — iC7Zi, Mar 21 '13 at 12:07
If I place it under my canvasDraw_PointerMoved event what do you think is their going to be any performance issue? — iC7Zi, Mar 21 '13 at 12:20
Ok I am facing some lag, I tried to save the x,y and color in generic list and after that for loop to create bitmap but the for loop takes forever to run. Any suggestions? — iC7Zi, Mar 21 '13 at 12:45

score 0 · Answer 1 · answered Mar 20 '13 at 18:46

Read this example http://blogs.msdn.com/b/swick/archive/2007/12/02/rendering-ink-and-image-to-a-bitmap-using-wpf.aspx

Code Extract from site:

// render InkCanvas' visual tree to the RenderTargetBitmap
RenderTargetBitmap targetBitmap =
    new RenderTargetBitmap((int)inkCanvas1.ActualWidth,
                           (int)inkCanvas1.ActualHeight,
                           96d, 96d,
                           PixelFormats.Default);
targetBitmap.Render(inkCanvas1);

// add the RenderTargetBitmap to a Bitmapencoder
BmpBitmapEncoder encoder = new BmpBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(targetBitmap));

// save file to disk
FileStream fs = File.Open(fileName, FileMode.OpenOrCreate);
encoder.Save(fs);

RenderTargetBitmap is not available in windows-rt – iC7Zi Mar 20 '13 at 19:32 — iC7Zi, Mar 20 '13 at 19:32

score 0 · Answer 2 · answered Jul 31 '13 at 11:21

Yes RenderTargetBitmap it is not available in windows store app target to 8.0

Windows 8.1 APIs include the new RenderTargetBitmap class that allows to render to a bitmap with its RenderAsync methods. you can now use this method link although its not working with MediaElement which i need :(

How to save drawn ellipse over canvas as an image - Windows RT

2 Answers2