Reputation: 1372

Save InkCanvas strokes as png /jpg image in Windows 10

Is there a way to save strokes from InkCanvas into png / jpg image in Windows 10 (UWP app) ?

Upvotes: 2

Answers (3)

Michael Bedford

Reputation: 1814

I know this is an old post but here is how I found to do it for others who might need it.

If you don't want to save your InkCanvas to a file or as a GIF, to manipulate it in memory. I actually have three options below. Note, for some of this, you will need to add a reference to Win2D.uwp, which can be found on NuGet by searching that exact name. It is provided by Microsoft.

Convert the InkCanvas to a byte array:

private byte[] ConvertInkCanvasToByteArray()
{
    var canvasStrokes = cvsSignature.InkPresenter.StrokeContainer.GetStrokes();

    if (canvasStrokes.Count > 0)
    {
        var width = (int)cvsSignature.ActualWidth;
        var height = (int)cvsSignature.ActualHeight;
        var device = CanvasDevice.GetSharedDevice();
        var renderTarget = new CanvasRenderTarget(device, width,
            height, 96);

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

        return renderTarget.GetPixelBytes();
    }
    else
    {
        return null;
    }
}

If all you need is a byte array of the pixels, you are done. However, if you now want to generate an image, you use the WriteableBitmap to do so. Here are sync and async methods that can be called to do this.

private WriteableBitmap GetSignatureBitmapFull()
{
    var bytes = ConvertInkCanvasToByteArray();

    if (bytes != null)
    {
        var width = (int)cvsSignature.ActualWidth;
        var height = (int)cvsSignature.ActualHeight;

        var bmp = new WriteableBitmap(width, height);
        using (var stream = bmp.PixelBuffer.AsStream())
        {
            stream.Write(bytes, 0, bytes.Length);
            return bmp;
        }
    }
    else
        return null;
}

private async Task<WriteableBitmap> GetSignatureBitmapFullAsync()
{
    var bytes = ConvertInkCanvasToByteArray();

    if (bytes != null)
    {
        var width = (int)cvsSignature.ActualWidth;
        var height = (int)cvsSignature.ActualHeight;

        var bmp = new WriteableBitmap(width, height);
        using (var stream = bmp.PixelBuffer.AsStream())
        {
            await stream.WriteAsync(bytes, 0, bytes.Length);
            return bmp;
        }
    }
    else
        return null;
}

Finally, here is an async method that I am using to be able to do a crop on the bitmap if you want to do that. The key thing with this method is notice how with this approach, you don't have to get the pixel bytes as an array first. You just get the strokes from the canvas and then it is saved directly into a memory stream

private async Task<WriteableBitmap> GetSignatureBitmapCropped()
{
    try
    {
        var canvasStrokes = cvsSignature.InkPresenter.StrokeContainer.GetStrokes();

        if (canvasStrokes.Count > 0)
        {
            var bounds = cvsSignature.InkPresenter.StrokeContainer.BoundingRect;
            var xOffset = (uint)Math.Round(bounds.X);
            var yOffset = (uint)Math.Round(bounds.Y);
            var pixelWidth = (int)Math.Round(bounds.Width);
            var pixelHeight = (int)Math.Round(bounds.Height);

            using (var memStream = new InMemoryRandomAccessStream())
            {
                await cvsSignature.InkPresenter.StrokeContainer.SaveAsync(memStream);

                var decoder = await BitmapDecoder.CreateAsync(memStream);

                var transform = new BitmapTransform();
                var newBounds = new BitmapBounds();
                newBounds.X = 0;
                newBounds.Y = 0;
                newBounds.Width = (uint)pixelWidth;
                newBounds.Height = (uint)pixelHeight;
                transform.Bounds = newBounds;

                var pdp = await decoder.GetPixelDataAsync(
                    BitmapPixelFormat.Bgra8,
                    BitmapAlphaMode.Straight,
                    transform,
                    ExifOrientationMode.IgnoreExifOrientation,
                    ColorManagementMode.DoNotColorManage);

                var pixels = pdp.DetachPixelData();

                var cropBmp = new WriteableBitmap(pixelWidth, pixelHeight);

                using (var stream = cropBmp.PixelBuffer.AsStream())
                {
                    await stream.WriteAsync(pixels, 0, pixels.Length);
                }
                return cropBmp;
            }
        }
        else
        {
            return null;
        }
    }
    catch (Exception ex)
    {
        return null;
    }
}

Hope this helps provide some alternatives when using InkCanvas in Windows 10 Universal.

Upvotes: 2

Fangfang Wu - MSFT

Reputation: 1072

What you are asking is kind of taking screen snapshot. In that case, RenderTargetBitmap seems can help. It can render an arbitrary UIElement into a bitmap. You can refer to my reply in this post.

Upvotes: 0

Igor Ralic

Reputation: 15006

Sure, just save the stroke container to a stream and write it to a file.

if (inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Count > 0)
{
    var savePicker = new Windows.Storage.Pickers.FileSavePicker();
    savePicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
    savePicker.FileTypeChoices.Add("PNG", new System.Collections.Generic.List<string> { ".png" });

    Windows.Storage.StorageFile file = await savePicker.PickSaveFileAsync();
    if (null != file)
    {
        try
        {
            using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
            {
                await inkCanvas.InkPresenter.StrokeContainer.SaveAsync(stream);
            }
        }
        catch (Exception ex)
        {
        }
    }
}

More InkCanvas samples can be found here.

Upvotes: 0

Save InkCanvas strokes as png /jpg image in Windows 10

Answers (3)

Related Questions