How to paste image to canvas from WebView2?

Question

In C# uwp project i want to paste image from a WebView2 to my Canvas.

I tried to implement that in 2 ways: with drag n drop and with right click copy.

Drag n drop cannot be possible because i cannot drag the image from webview2, so the subscribed drop method is not triggered on the canvas.

When I right-click -> copy the image that I want to paste on the canvas, I couldn't paste it because the image was not included in the clipboard history either.

I saw that is a known issue in WebView2 and i found it on the official webview2 feedback page, but i did not get an answer when will be this bug fixed. (https://github.com/MicrosoftEdge/WebView2Feedback/issues/2900)

Can you recommend any solution to solve this?

Answer 1

Hi @Tamás Bitó ,

Welcome to Microsoft Q&A!

I checked the document of Webview2. Sorry, currently there is no API can get images in WebView2 in UWP.

The solution I can think of is to copy the image link in WebView2 and paste the link in canvas.

 private async void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
 {
     var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.GetContent();
     if (dataPackageView.Contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.Text))
     {
         var imgurl = await dataPackageView.GetTextAsync();
         webImage.Source = new BitmapImage(new Uri(imgurl));
     }
 }

<Page
    x:Class="Webview2ImageCopyTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Webview2ImageCopyTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <controls:WebView2 x:Name="webview" Grid.Row="0" Source="https://bing.com"/>
        <Canvas Grid.Row="1" Background="AliceBlue" >
            <Canvas.ContextFlyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="Paste" Icon="Paste" Click="MenuFlyoutItem_Click"/>
                </MenuFlyout>
            </Canvas.ContextFlyout>
           
            <Image x:Name="webImage"></Image>
        </Canvas>
    </Grid>
</Page>

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.