如何将 WebViewBrush 保存为图像？ （UWP/通用）

Question

总结：我有一个集合 FrameworkElements（基本上是在矩形上绘制的 Web 视图画笔），我想在我的 UWP 应用程序中将其中的每一个都保存为 PNG 文件。

更多详情：我按照https://stackoverflow.com/a/17222629/2884981 的示例将 WebView 的内容拆分为单独的“页面”。

我把主要的代码部分放在了底部。

在GetWebPages() 的底部我有return pages; 此时我有一个所有“页面”的列表。

然后我想做的是将这些页面中的每一个都转换为图像（例如，到最后我会有一组 PNG 文件）。

有人知道我该怎么做吗？提前致谢。

    public async Task<WebViewBrush> GetWebViewBrush(WebView webView)
    {
        // resize width to content
        double originalWidth = webView.Width;
        var widthString = await webView.InvokeScriptAsync("eval", new[] { "document.body.scrollWidth.toString()" });
        int contentWidth;

        if (!int.TryParse(widthString, out contentWidth))
        {
            throw new Exception(string.Format("failure/width:{0}", widthString));
        }

        webView.Width = contentWidth;

        // resize height to content
        double originalHeight = webView.Height;
        var heightString = await webView.InvokeScriptAsync("eval", new[] { "document.body.scrollHeight.toString()" });
        int contentHeight;

        if (!int.TryParse(heightString, out contentHeight))
        {
            throw new Exception(string.Format("failure/height:{0}", heightString));
        }

        webView.Height = contentHeight;

        // create brush
        var originalVisibilty = webView.Visibility;
        webView.Visibility = Windows.UI.Xaml.Visibility.Visible;

        WebViewBrush brush = new WebViewBrush
        {
            SourceName = webView.Name,
            Stretch = Stretch.Uniform
        };

        brush.Redraw();

        // reset, return
        webView.Width = originalWidth;
        webView.Height = originalHeight;
        webView.Visibility = originalVisibilty;

        return brush;
    }

还有：

        public async Task<IEnumerable<FrameworkElement>> GetWebPages(WebView webView, Windows.Foundation.Size page)
        {
            // ask the content its width
            var widthString = await webView.InvokeScriptAsync("eval", new[] { "document.body.scrollWidth.toString()" });
            int contentWidth;

            if (!int.TryParse(widthString, out contentWidth))
            {
                throw new Exception(string.Format("failure/width:{0}", widthString));
            }

            webView.Width = contentWidth;

            // ask the content its height
            var heightString = await webView.InvokeScriptAsync("eval", new[] { "document.body.scrollHeight.toString()" });
            int contentHeight;

            if (!int.TryParse(heightString, out contentHeight))
            {
                throw new Exception(string.Format("failure/height:{0}", heightString));
            }

            webView.Height = contentHeight;

            // how many pages will there be?
            double scale = page.Width / contentWidth;
            double scaledHeight = (contentHeight * scale);
            double pageCount = (double) scaledHeight / page.Height;
            pageCount = pageCount + ((pageCount > (int) pageCount) ? 1 : 0);

            // create the pages
            var pages = new List<Windows.UI.Xaml.Shapes.Rectangle>();

            for (int i = 0; i < (int)pageCount; i++)
            {
                var translateY = -page.Height * i;

                var rectanglePage = new Windows.UI.Xaml.Shapes.Rectangle
                {
                    Height = page.Height,
                    Width = page.Width,
                    Margin = new Thickness(5),
                    Tag = new TranslateTransform { Y = translateY },
                };

                rectanglePage.Loaded += (async (s, e) =>
                {
                    var subRectangle = s as Windows.UI.Xaml.Shapes.Rectangle;
                    var subBrush = await GetWebViewBrush(webView);
                    subBrush.Stretch = Stretch.UniformToFill;
                    subBrush.AlignmentY = AlignmentY.Top;
                    subBrush.Transform = subRectangle.Tag as TranslateTransform;
                    subRectangle.Fill = subBrush;
                });

                pages.Add(rectanglePage);
            }

            return pages;
        }

Answer 1

我想在我的 UWP 应用中将其中的每一个都保存为 PNG 文件。

您可以获取所有矩形并将它们显示在ItemsControl 中的NavigationCompleted 事件WebView 中，如下所示：

private async void webView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
    MyWebViewRectangle.Fill = await GetWebViewBrush(webView);
    MyPrintPages.ItemsSource = await GetWebPages(webView, new Windows.Foundation.Size(842, 595));
}

然后在按钮单击事件中，您可以将所有项目保存为 .png 图像，如下所示：

private async void Savetoimage_Clicked(object sender, RoutedEventArgs e)
{
    var piclib = Windows.Storage.KnownFolders.PicturesLibrary;
    foreach (var item in MyPrintPages.Items)
    {
        var rect = item as Rectangle;
        RenderTargetBitmap renderbmp = new RenderTargetBitmap();
        await renderbmp.RenderAsync(rect);
        var pixels = await renderbmp.GetPixelsAsync();
        var file = await piclib.CreateFileAsync("webview.png", Windows.Storage.CreationCollisionOption.GenerateUniqueName);
        using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
        {
            BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
            byte[] bytes = pixels.ToArray();
            encoder.SetPixelData(BitmapPixelFormat.Bgra8,
                             BitmapAlphaMode.Ignore,
                             (uint)rect.Width, (uint)rect.Height,
                             0, 0, bytes);
            await encoder.FlushAsync();
        }
    }
}