Xamarin Forms UWP Capture Screenshot Include Signature Pad

Question

I have a Xamarin Forms page using Signature Pad (https://github.com/xamarin/SignaturePad). I'm attempting to capture a screenshot of the entire view. It should include the signature as well.

However, using the following code I'm noticing the signature does not show up.

What is the best way to capture the full Page including the signature? (not just the signature)

public class ScreenshotService : IScreenshotService
{
    public async Task<byte[]> CaptureAsync()
    {
    var rtb = new RenderTargetBitmap();
    await rtb.RenderAsync(Window.Current.Content);

    var pixelBuffer = await rtb.GetPixelsAsync();
    var pixels = pixelBuffer.ToArray();

    // Useful for rendering in the correct DPI
    var displayInformation = DisplayInformation.GetForCurrentView();

    var stream = new InMemoryRandomAccessStream();
    var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
    encoder.SetPixelData(BitmapPixelFormat.Bgra8,
    BitmapAlphaMode.Premultiplied,
    (uint)rtb.PixelWidth,
    (uint)rtb.PixelHeight,
    displayInformation.RawDpiX,
    displayInformation.RawDpiY,
    pixels);

    await encoder.FlushAsync();
    stream.Seek(0);

    var readStram = stream.AsStreamForRead();
    var bytes = new byte[readStram.Length];
    readStram.Read(bytes, 0, bytes.Length);

    return bytes;
}
}

Nico Zhu · Accepted Answer · 2017-11-17T02:05:53.080

According to the "XAML visuals and RenderTargetBitmap capture capabilities" of RenderTargetBitmap class:

Content that can't be captured will appear as blank in the captured image, but other content in the same visual tree can still be captured and will render (the presence of content that can't be captured won't invalidate the entire capture of that XAML composition).

So it could be that the content of InkCanvas is not captureable. However, you can use Win2D. For more you could refer the following code.

public async Task<Stream> CaptureAsync(Stream Tem)
{
    var rtb = new RenderTargetBitmap();
    await rtb.RenderAsync(Window.Current.Content);

    var pixelBuffer = await rtb.GetPixelsAsync();
    var pixels = pixelBuffer.ToArray();

    var displayInformation = DisplayInformation.GetForCurrentView();
    var stream = new InMemoryRandomAccessStream();
    var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
    encoder.SetPixelData(BitmapPixelFormat.Bgra8,
    BitmapAlphaMode.Premultiplied,
    (uint)rtb.PixelWidth,
    (uint)rtb.PixelHeight,
    displayInformation.RawDpiX,
    displayInformation.RawDpiY,
    pixels);
    await encoder.FlushAsync();
    stream.Seek(0);
    var readStram = stream.AsStreamForRead();

    var pagebitmap = await GetSoftwareBitmap(readStram);
    var softwareBitmap = await GetSoftwareBitmap(Tem);

    CanvasDevice device = CanvasDevice.GetSharedDevice();
    CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, rtb.PixelWidth, rtb.PixelHeight, 96);

    using (var ds = renderTarget.CreateDrawingSession())
    {
        ds.Clear(Colors.White);
        var page = CanvasBitmap.CreateFromSoftwareBitmap(device, pagebitmap);
        var image = CanvasBitmap.CreateFromSoftwareBitmap(device, softwareBitmap);
        ds.DrawImage(page);
        ds.DrawImage(image);
    }

    InMemoryRandomAccessStream randomAccessStream = new InMemoryRandomAccessStream();
    await renderTarget.SaveAsync(randomAccessStream, CanvasBitmapFileFormat.Jpeg, 1f);
    return randomAccessStream.AsStream();
}

 private async Task<SoftwareBitmap> GetSoftwareBitmap(Stream data)
 {
   BitmapDecoder pagedecoder = await BitmapDecoder.CreateAsync(data.AsRandomAccessStream());
   return await pagedecoder.GetSoftwareBitmapAsync(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);
 }

IScreenshotServicecs interface

public interface IScreenshotServicecs
{
    Task<Stream> CaptureAsync(Stream stream);
}

Usage

var stream = await SignatureView.GetImageStreamAsync(SignaturePad.Forms.SignatureImageFormat.Png);
var data = await DependencyService.Get<IScreenshotServicecs>().CaptureAsync(stream);
MyImage.Source = ImageSource.FromStream(() => data);

Thanks for the answer. Going to take a look into this. My problem with this approach is iOS/Android don't require passing in the Stream. They can simple handle capturing the whole view, including the signature — aherrick, Nov 14 '17 at 14:53
how would you take the converted image and return as an image byte array? I'm not trying to store locally, just passing the byte array stream to an API. I've tried: return renderTarget.GetPixelBytes(); — aherrick, Nov 14 '17 at 16:31
Yes, of course you can, I store image locally that we could test it conveniently. — Nico Zhu, Nov 15 '17 at 01:37
Thanks! Do you have an example? Trying to return GetPixelBytes() didn't give me an image that was rendering properly. — aherrick, Nov 15 '17 at 12:36
Yep, I have uploaded code [sample](https://github.com/ZhuMingHao/ScreenCaptureTest). — Nico Zhu, Nov 16 '17 at 01:55
great thanks. my problem is i can't get GetPixelBytes to then render in an image. I have a Xamarin Forms Image in XAML named "img" img.Source = ImageSource.FromStream(() => new MemoryStream(screenShotImage)); does not work. Are you able to actually then render the byte array image in the app? — aherrick, Nov 16 '17 at 17:58
Yep. I got it, I have edited the answer. Please check, and the return type of `CaptureAsync` method has been changed to `Stream`. — Nico Zhu, Nov 17 '17 at 02:11

score 1 · Answer 2 · answered Nov 17 '17 at 15:02

Here is my final implementation including converting to byte array.

    public async Task<byte[]> CaptureAsync(Stream signatureStream)
    {
        var rtb = new RenderTargetBitmap();
        await rtb.RenderAsync(Window.Current.Content);

        var pixelBuffer = await rtb.GetPixelsAsync();
        var pixels = pixelBuffer.ToArray();

        var displayInformation = DisplayInformation.GetForCurrentView();
        var stream = new InMemoryRandomAccessStream();
        var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
        encoder.SetPixelData(BitmapPixelFormat.Bgra8,
        BitmapAlphaMode.Premultiplied,
        (uint)rtb.PixelWidth,
        (uint)rtb.PixelHeight,
        displayInformation.RawDpiX,
        displayInformation.RawDpiY,
        pixels);
        await encoder.FlushAsync();
        stream.Seek(0);
        var readStram = stream.AsStreamForRead();

        var pagebitmap = await GetSoftwareBitmap(readStram);
        var softwareBitmap = await GetSoftwareBitmap(signatureStream);

        CanvasDevice device = CanvasDevice.GetSharedDevice();
        CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, rtb.PixelWidth, rtb.PixelHeight, 96);

        using (var ds = renderTarget.CreateDrawingSession())
        {
            ds.Clear(Colors.White);
            var page = CanvasBitmap.CreateFromSoftwareBitmap(device, pagebitmap);
            var image = CanvasBitmap.CreateFromSoftwareBitmap(device, softwareBitmap);
            ds.DrawImage(page);
            ds.DrawImage(image, 50, 55);
        }

        InMemoryRandomAccessStream randomAccessStream = new InMemoryRandomAccessStream();
        await renderTarget.SaveAsync(randomAccessStream, CanvasBitmapFileFormat.Jpeg, 1f);

        var fileBytes = new byte[randomAccessStream.Size];
        using (var reader = new DataReader(randomAccessStream))
        {
            await reader.LoadAsync((uint)randomAccessStream.Size);
            reader.ReadBytes(fileBytes);
        }

        return fileBytes;
    }

Xamarin Forms UWP Capture Screenshot Include Signature Pad

2 Answers2