0

我有一个 WPF 桌面应用程序。在其中我有一个显示帮助窗口的菜单选项。帮助窗口只是包装了一个 System.Windows.Controls.WebBrowser 控件。

现在我可以创建一个简单的 HTML 页面来显示我的帮助内容。到目前为止,这一切都很好。

当我尝试在 HTML 文件中包含图像时出现问题,例如我公司的带有“img”标签的徽标。徽标作为资源嵌入在可执行文件中。

谁能告诉我如何将嵌入图像放到 HTLM 页面上?

以下不起作用:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table style="width: 100%;">
        <tr>
            <td>&nbsp;
            </td>
            <td style="align-content:center">
                <img alt="My Logo" src="../Images/MyLogo_3115-2935.jpg" width="500"/>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>
</body>
</html>
4

2 回答 2

1

我感谢 user2509738 的回复,但是,我想使用嵌入的图像而不是部署单独的文件。我想出了自己的解决方案,为了完整起见,我会在这里发布。

我使用http://htmlagilitypack.codeplex.com上的 HtmlAgilityPack来简化解析。

这是 HelpWindow.Xaml

<Window x:Class="POC_WpfHelpWindowUsingHtml.HelpWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="HelpWindow" Height="600" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <WebBrowser x:Name="helpBrowser"/>
        <StackPanel x:Name="controlPanel"
                    Grid.Row="1"
                    Orientation="Horizontal"
                    HorizontalAlignment="Right">
            <Button x:Name="closeButton"
                    Margin="0,10,20,10" Width="100"
                    Content="Close"
                    Click="closeButton_Click"/>
        </StackPanel>
    </Grid>
</Window>

这是文件形式的 HTML 内容:HelpContent.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table style="width: 100%;">
        <tr>
            <td>&nbsp;
            </td>
            <td style="align-content:center">
                <img id="imgMyLogo" alt="My Logo" src="Images/MyLogo.png" width="100"/>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>
</body>
</html>

这是具有大部分魔法的 HelpWindow.xaml.cs 文件

using System;
using System.IO;
using System.Windows;
using HtmlAgilityPack;
using System.Reflection;

namespace POC_WpfHelpWindowUsingHtml
{
    /// <summary>
    /// Interaction logic for HelpWindow.xaml
    /// </summary>
    public partial class HelpWindow : Window
    {
        public HelpWindow()
        {
            InitializeComponent();
            Uri uri = new Uri(@"/HelpContent.html", UriKind.Relative);
            System.Windows.Resources.StreamResourceInfo info
                = System.Windows.Application.GetContentStream(uri);
            Stream streamOriginalPage = info.Stream;
            Stream streamModifiedPage = new MemoryStream();
            StreamWriter streamWriter = new StreamWriter(streamModifiedPage);

            // this is from HtmlAgilityPack
            HtmlDocument doc = new HtmlDocument();
            doc.Load(streamOriginalPage);
            // find all the img elements
            foreach (HtmlNode node in doc.DocumentNode.SelectNodes("//img"))
            {
                // change the image reference to an embedded string
                string src = node.GetAttributeValue("src", "");
                src = ConvertImageToEmbeddedString(src);
                if (!string.IsNullOrWhiteSpace(src))
                {
                    node.SetAttributeValue("src", src);
                }
            }
            // save the changes
            doc.Save(streamWriter);
            streamWriter.Flush();
            streamModifiedPage.Position = 0;

            // send the Html content to the WebBrowser component
            helpBrowser.NavigateToStream(streamModifiedPage);
        }

        private void closeButton_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        private string ConvertImageToEmbeddedString(string source)
        {
            // find the image type
            string imageType = "png";
            if (source.ToLower().IndexOf("jpg") > -1) imageType = "jpg";
            if (source.ToLower().IndexOf("ico") > -1) imageType = "ico";
            // initialize the return value
            string ret = "";

            if (source.Length > 4)
            {
                if (!source.StartsWith("/"))
                {
                    source = "/" + source;
                }

                // get the embedded image as a stream
                Stream stream = Application.GetResourceStream(
                    new Uri("pack://application:,,," + source)).Stream;
                if (stream != null)
                {
                    // put the image into an Image object
                    System.Drawing.Image image = System.Drawing.Image.FromStream(stream);
                    if (image != null)
                    {
                        // prepend the text for Data URI scheme
                        ret = "data:image/" + imageType + ";base64,";
                        using (MemoryStream ms = new MemoryStream())
                        {
                            // convert the image into a MemoryStream
                            image.Save(ms, image.RawFormat);
                            // convert the image to base64 encoding
                            ret += Convert.ToBase64String(ms.ToArray());
                        }
                    }
                }
            }

            return ret;
        }
    }
}
于 2013-07-09T18:40:13.333 回答
1

指定图像的绝对路径将起作用。例如,在 HTML

<img alt="My Logo" src="file:///C:/Images/MyLogo_3115-2935.jpg" width="500"/>

此解决方案不适用于应用程序资源。您必须从资源本地创建一个文件,至少是暂时的。或者使用应用程序在本地复制文件。

另一种更复杂的解决方案是将网络服务器嵌入到您的应用程序中,或者在其他地方响应网络请求。有关详细信息,请参阅HttpListener

于 2013-07-08T20:22:51.780 回答