How to paste image to canvas from WebView2?

Tamás Bitó 20 Reputation points
2024-05-03T12:24:11.99+00:00

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?

Universal Windows Platform (UWP)
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,390 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Junjie Zhu - MSFT 15,836 Reputation points Microsoft Vendor
    2024-05-06T07:14:06.7633333+00:00

    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.

    0 comments No comments