InkCanvas to BitMap

Question

I have a problem with saving canvas to BMP file (or any other type).

I'm trying to save my InkCanvas like this:

int margin = (int)canvas.Margin.Left;
int width = (int)canvas.ActualWidth -margin;
int height = (int)canvas.ActualHeight -margin;
//render ink to bitmap
RenderTargetBitmap renderBitmap =
new RenderTargetBitmap(width, height, 96d, 96d, PixelFormats.Default);
renderBitmap.Render(canvas);
//save the ink to a memory stream
BitmapEncoder encoder;
encoder = new BmpBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
encoder.Save(myStream);

But i always got an image with a black borders from left and top, equal size from point (0,0) of my window to my canvas. What i do wrong?

Answer 1

From what I have read Bitmaps cannot handle transparent backgrounds. So when the bitmap is created it leaves the pixels as black. Just change your ink canvas to have a white background (or whatever color you want). Check this out: WPF - Black Background surrounding saved canvas as jpeg also you may want to try to get rid of the minus margins and just use the whole ink canvas when creating the image.

RenderTargetBitmap rtb = new RenderTargetBitmap((int)inkCanvas.ActualWidth, (int)inkCanvas.ActualHeight, 96, 96, System.Windows.Media.PixelFormats.Default);

Answer 2

You need to put it into a separate container (ie., into Grid).

Answer 3

I had a similar problem and it looks like your margins are affecting the rendering of the image.

I presume canvas is the name of the InkCanvas, so to avoid the black borders - all you need to do is amend your WPF frames and use a canvas to set up your margins instead of using the InkCanvas:

<Grid Height="340" Width="445">
   <Canvas Background="Transparent" Margin="10,10,0,0">
      <InkCanvas Name="canvas" Height="320" Width="425"/>
   </Canvas>
</Grid>