捕捉HTML内容(WebView)

最新推荐文章于 2025-11-10 21:31:07 发布

原创最新推荐文章于 2025-11-10 21:31:07 发布 · 655 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uwp #capture html

UWP开发专栏收录该内容

65 篇文章

订阅专栏

这篇博客介绍了如何使用UWP中的WebView控件的CapturePreviewToStreamAsync方法将HTML内容捕获为图像。方法只能捕获WebView当前显示的部分，无法获取滚动后的隐藏内容。示例展示了如何将捕获的HTML内容在Image控件中显示，并提供了保存为本地图片的代码片段。

CapturePreviewToStreamAsaync方法可以将WebView当前所呈现的内容保存到字节流中，以做进一步处理，如保存为图像文件。

读者要注意的是，CapturePreviewToStreamAsync方法只能捕捉WebView中可见的那部分内容，如果HTML内容较多，WebView需要滚动才能看全部内容时，只有已经在WebView控件上呈现出来的那部分内容才会被捕捉到，其他不可见的内容将被忽略。

下面示例使用CapturePreviewToStreamAsuync捕捉WebView中的内容，然后在Image控件中显示已捕捉的数据。

应用程序主页的XAML代码如下：

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <WebView x:Name="wv"/>
        <Button Grid.Row="1" Content="将 HTML 内容保存为图片" Tapped="Button_Tapped"/>
        <Image x:Name="img" Grid.Row="2"/>
        <Button x:Name="save_btn" Grid.Row="3" Content="保存" Tapped="save_btn_Tapped"/>
    </Grid>

在OnNavigateTo方法中，让WebView导航到MSDN的主页。

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            var uri = new Uri("http://msdn.microsoft.com/zh-cn/");
            wv.Navigate(uri);
        }

本示例将捕捉MSDN主页上的内容，处理按钮的Click事件，代码如下：

        private async void Button_Tapped(object sender, TappedRoutedEventArgs e)
        {
            _captureStream = new InMemoryRandomAccessStream();
            
                //捕捉HTML内容并保存到内存流中
                await wv.CapturePreviewToStreamAsync(_captureStream);
                _captureStream.Seek(0);
                //创建位图像
                BitmapImage bmp = new BitmapImage();
                await bmp.SetSourceAsync(_captureStream);
                //显示图像
                img.Source = bmp;
        }

InMemoryRandomAccessStream类表示内存流，可以在内存中读写数据。调用CapturePreviewToStreamAsyncz方法后，捕捉到数据会自动写入内存流中。

运行应用程序，当主页出现后，稍等片刻，等到WebView控件中显示出MSDN的官方主页后，单击"将 HTM 内容保存为图片"按钮，WebView会将当前呈现的HTML内容捕捉为图像数据，并在Image控件中显示该图像。

通过流，将图片保存到本地的代码片段：

        private async void save_btn_Tapped(object sender, TappedRoutedEventArgs e)
        {
            FileSavePicker picker = new FileSavePicker();
            picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
            picker.FileTypeChoices.Add("JPG",new string[] { ".jpg"});
            picker.SuggestedFileName = "Test";
            var file = await picker.PickSaveFileAsync();
            if (file != null)
            {
                using (var outputStream = await file.OpenAsync(FileAccessMode.ReadWrite))
                {
                    var decoder = await BitmapDecoder.CreateAsync(_captureStream);
                    var encoder = await BitmapEncoder.CreateForTranscodingAsync(outputStream, decoder);
                    await encoder.FlushAsync();
                }
                _captureStream.Dispose();
            }
        }