Search code examples
c#xamluwpinkcanvasrendertargetbitmap

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


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!


Solution

  • 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);