0

Im using C# .net framework and WPF to create an Mspaint like application. I want to have a function that allows the user to save what they are working on and come back to it later. I've stored the canvas background and canvas strokes into a byte array to store in a DB, and I have found how to retrieve and convert the background image byte array, but I cant seem to figure out how to convert the InkStroke byte array data back to its original form.

I'll include examples for the code I was able to write

private StrokeCollection DisplayCanvasStrokeBytes(byte[] array)
        {
            //THIS is the method I am struggling to write
        }

private byte[] GetInkByteArray()
        {
            MemoryStream ms = new MemoryStream();
            DrawingCanvas.Strokes.Save(ms);
            byte[] bytes = ms.ToArray();
            return bytes;
        }

        private byte[] GetBitMapOfCanvasBackground()
        {
            //strokes are cleared so that ink can be edited in the future
            DrawingCanvas.Strokes.Clear();

            MemoryStream ms = new MemoryStream();

            //this is the same code used to "save as new image", so essentially 
            //I saved a new image of just the background and used that to save to the db
            //this is not the best practice and is a bit over-complicated, but I was struggling to figure out
            //How to save DrawingCanvas.Background as a byte array
            
            int marg = int.Parse(DrawingCanvas.Margin.Left.ToString());
            RenderTargetBitmap rtb =
                    new RenderTargetBitmap((int)DrawingCanvas.ActualWidth - marg,
                            (int)DrawingCanvas.ActualHeight - marg, 0, 0,
                        PixelFormats.Default);
            rtb.Render(DrawingCanvas);
            BmpBitmapEncoder encoder = new BmpBitmapEncoder();
            encoder.Frames.Add(BitmapFrame.Create(rtb));

            encoder.Save(ms);

            byte[] bytes = ms.ToArray();

            return bytes;
        }
   private ImageBrush DisplayBackgroundImageBytes(byte[] array)
        {
            ImageBrush brush;
            BitmapImage bi;
            using (var ms = new MemoryStream(array))
            {
                brush = new ImageBrush();

                bi = new BitmapImage();
                bi.BeginInit();
                bi.CreateOptions = BitmapCreateOptions.None;
                bi.CacheOption = BitmapCacheOption.OnLoad;
                bi.StreamSource = ms;
                bi.EndInit();
            }

            brush.ImageSource = bi;
            
            return brush;
        }


AnnaJoyW
  • 21
  • 2
  • I've never used WPF and strokes and a canvas. However, if you want to enable strokes and have them survive a round trip to a file, you need to save not only a bitmap, but the strokes themselves. If you search for "serialize strokes canvas wpf" you can find several SO questions including this one: https://stackoverflow.com/questions/30896167/converting-inkcanvas-strokes-to-a-byte-array-and-back-again – Flydog57 Aug 26 '21 at 23:56
  • You have already used StrokeCollection.Save. Now create a new StrokeCollection from the saved data by [this constructor](https://learn.microsoft.com/en-us/dotnet/api/system.windows.ink.strokecollection.-ctor?view=net-5.0#System_Windows_Ink_StrokeCollection__ctor_System_IO_Stream_). – Clemens Aug 27 '21 at 05:09
  • @Clemens you are a lifesaver – AnnaJoyW Aug 27 '21 at 18:01

0 Answers0