InkCanvas saving produces the wrong dimensions

Question

I use a canvas that has a set width and height. It is 500x500 big and I also want to save it as such with this method:

    private async void SaveasGIF(object sender, RoutedEventArgs e)
    {
        var savePicker = new Windows.Storage.Pickers.FileSavePicker();
        savePicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
        savePicker.FileTypeChoices.Add("Gif with embedded ISF", new[] { ".gif" });

        Windows.Storage.StorageFile file = await savePicker.PickSaveFileAsync();
        if (null != file)
        {
            try
            {
                using (Windows.Storage.Streams.IRandomAccessStream stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite))
                {
                    // Truncate any existing stream in case the new file
                    // is smaller than the old file.
                    stream.Size = 0;

                    await MyInkCanvas.InkPresenter.StrokeContainer.SaveAsync(stream);
                }
                //MainPage.NotifyUser("File has been saved!", NotifyType.StatusMessage);
            }
            catch (Exception ex)
            {
                //MainPage.NotifyUser(ex.Message, NotifyType.ErrorMessage);
            }
        }
        SaveGIF.IsChecked = false;
    }

But when I do so, the finished .gif file is cropped and has dimensions like 421x643.

What can I change to fix this?

score 0 · Answer 1 · answered Dec 11 '17 at 00:55

This code await MyInkCanvas.InkPresenter.StrokeContainer.SaveAsync(stream); is to save a collection of ink strokes into a file. This is not exactly the same as rendering the contents of InkCanvas control into an image. If strokes go beyond the InkCanvas, the resulting .gif dimensions will be greater than the dimensions of the original InkCanvas and vice versa.

If your primary goal is to save the content of InkCanvas as an image (and not the ink strokes that you're planning on loading into an InkCanvas sometime later), use Win2D as described here.

Thanks. I have my canvas size set when I create the canvas. I indeed want to save the inkstrokes to load them later into the other canvas, but I want to keep the size of the new canvas the same as the former one. — JDoeDoeDoeJ, Dec 11 '17 at 08:27

score 0 · Answer 2 · answered Dec 21 '17 at 06:26

It's a known issue. You could see it on Win2D Github issue.

The problem appears to be that InkStroke.GetBounds is not accounting for bezier curvature, so it only reports bounds for the main control points of the strokes.

Please refer to shawnhar's comment with his workaround.

A workaround would be to convert the ink strokes into Win2D geometry (using CanvasGeometry.CreateInk) and then use Win2D geometry APIs to query their bounds. That will be accurate for all pen ink strokes, but will not work if you are using pencil ink style.

InkCanvas saving produces the wrong dimensions

2 Answers2