从文件选择器将图像加载到画布控件答案

【问题标题】：Load an Image to a Canvas Control from a File Picker从文件选择器将图像加载到画布控件
【发布时间】：2020-11-10 18:22:05
【问题描述】：

我在使用 Win2D 的 UWP 应用程序中尝试做的事情：用户按下按钮添加图像并选择他们的文件。该文件被加载为 Canvas 控件的资源。然后图像被渲染到当前的绘图会话

当按钮被点击时：

private async void btnAddPicture_Click(object sender, RoutedEventArgs e)
    {
        var picker = new Windows.Storage.Pickers.FileOpenPicker();
        picker.FileTypeFilter.Add(".png");
        picker.FileTypeFilter.Add(".jpg");
        picker.FileTypeFilter.Add(".jpeg");
        overlayPictureFile = await picker.PickSingleFileAsync();
        if (overlayPictureFile == null)
        {
            txbNotification.Text = "File Picking cancelled";
            return;
        }
        else
        {
            txbNotification.Text = "Picture Loaded";
        }
        using (IRandomAccessStream stream = await overlayPictureFile.OpenAsync(FileAccessMode.Read))
        {
            var device = new CanvasDevice();
            createdBitmap = await CanvasBitmap.LoadAsync(device, stream);
        }
    }

在绘图功能中：

void CanvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
    {
        if (createdBitmap != null)
        {
            args.DrawingSession.DrawImage(createdBitmap, Drawing.FindDefaultRect());
        }
        drawingCanvas.Invalidate();
    }

一切都会编译，但是当我按下按钮添加图像时，它会在此处中断。

#if DEBUG && !DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION
        UnhandledException += (sender, e) =>
        {
            if (global::System.Diagnostics.Debugger.IsAttached) global::System.Diagnostics.Debugger.Break();
        };

#endif

我已经在其中加载了一些图像，但这些都是程序的一部分，并且是在使用这些创建画布之前创建的。不知道如何处理用户选择的那些。

private void drawingCanvas_CreateResources(CanvasControl sender, Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
    {
        args.TrackAsyncAction(CreateResourcesAsync(sender).AsAsyncAction());
    }
    private async Task CreateResourcesAsync(CanvasControl sender)
    {
        logo = await CanvasBitmap.LoadAsync(sender, new Uri("ms-appx:///Assets/Pictures/Logo_BlackBorders.png"));
    }

更新：我目前正在画东西的地方。这是我要添加图像的画布。

void CanvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
    {
        //Drawing a bunch of stuff
    }
    private void drawingCanvas_CreateResources(CanvasControl sender, Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
    {
        args.TrackAsyncAction(CreateResourcesAsync(sender).AsAsyncAction());
    }
    private async Task CreateResourcesAsync(CanvasControl sender)
    {
        logo = await CanvasBitmap.LoadAsync(sender, new Uri("ms-appx:///Assets/Pictures/Logo.png"));
    }

【问题讨论】：

标签： c# windows uwp win2d

【解决方案1】：

从文件选择器将图像加载到画布控件

对于您的场景，您可以使用CreateDrawingSession 方法获得CanvasDrawingSession。然后使用此绘图会话将选取的图像绘制到当前CanvasControl。

例如。

private async void btnAddPicture_Click(object sender, RoutedEventArgs e)
{
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.FileTypeFilter.Add(".png");
    picker.FileTypeFilter.Add(".jpg");
    picker.FileTypeFilter.Add(".jpeg");
    var overlayPictureFile = await picker.PickSingleFileAsync();
    if (overlayPictureFile == null)
    {

        return;
    }
    else
    {

    }
    using (IRandomAccessStream stream = await overlayPictureFile.OpenAsync(FileAccessMode.Read))
    {
        //get canvascontrol's Device property.
        CanvasDevice device = drawingCanvas.Device;
        createdBitmap = await CanvasBitmap.LoadAsync(device, stream);
        //use device property to make renderer
        var renderer = new CanvasRenderTarget(device,
                              createdBitmap.SizeInPixels.Width,
                              createdBitmap.SizeInPixels.Height, createdBitmap.Dpi);
        //make ds with above renderer.
        using (var ds = renderer.CreateDrawingSession())
        {
            ds.DrawImage(createdBitmap, 0, 0);
        }

    }
}

【讨论】：