How to render InkCanvas to an image in UWP Windows 10 application?

13
votes

The RenderTargetBitmap class worked with simple Canvas + InkManager (in Windows 8.1) to render ink strokes to an image. UWP introduced InkCanvas and a new Inking API. However, it seems like the RenderTargetBitmap does not work with that. When I try to capture ink strokes with RenderAsync method, no ink strokes get rendered only other objects like Rectangle and so on.

Is it a bug or this new API is not meant to be used this way? If not, then how can I render an image out of InkCanvas?

Thanks!

2
c#xamluwpinkcanvasrendertargetbitmap
[inkCanvas].InkPresenter.StrokeContainer.SaveAsync can save as a .gif – tao
Yes, I'm aware of that. However, I guess it's an ISF (Ink Stroke Format) embedded in a .gif. The gif itself very ugly when opened, I can't use that. I definitely want to use RenderTargetBitmap, but it does not work as expected. I also tried decode the gif with BitmapDecoder, get the pixel data and encode it with BitmapEncoder to another format, also with no luck (it contains only zeros, the whole image is black). What I really want is to render a png or jpg image from it with white background for example. Maybe manipulate it later. Can anyone help? – mudbox
I tried to get back to the older InkManager + Canvas combination, but InkManager throws COM Exception when instantiated. – mudbox
OK, I'll have a solution which includes Win2D (Direct2D .NET wrapper from Microsoft). Win2D can be used in an UWP app via a nuget package. Very good stuff. I managed to save ink strokes to image (jpeg, png, and other formats) with this. – mudbox
@mudbox, I suggest you to write what you have found into an answer so it could help others. – Justin XL

2 Answers

17
votes

Here is how I solved this issue with Win2D. First of all, add Win2D.uwp nuget package to your project. Then use this code:

CanvasDevice device = CanvasDevice.GetSharedDevice();
CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)inkCanvas.ActualWidth, (int)inkCanvas.ActualHeight, 96);

using (var ds = renderTarget.CreateDrawingSession())
{
    ds.Clear(Colors.White);
    ds.DrawInk(inkCanvas.InkPresenter.StrokeContainer.GetStrokes());
}

using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite))
    await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Jpeg, 1f);