在Webbrowser控件中使用本地图像

Question

我在我的Wp7应用程序中使用Webbrowser控件，但似乎无法将位于应用程序目录中的图像放入Webbrowser中。

我已经将一些图像放在与.cs和.xaml文件相同目录下的文件夹中。现在我尝试将它们放入Webbrowser控件中，但似乎无法使其正常工作。

<img src="images/photo.jpg"/>
<img src="/images/photo.jpg"/>

显然上面两个不起作用，我的猜测是应该像这样：

<img src="/SilverlightApplication;component/photo.jpg"/>

“SilverlightApplication”和“component”应该被替换为其他内容，但我不知道该用什么:(

- MrCornholio

Answer 1

您需要将图像存储在隔离存储中，然后从那里显示图像。我已经准备了一个示例，您可以从以下位置下载：

www.smartmobiledevice.co.uk/projects/webbrowserimagesample.zip

这是基于MSDN文章如何在Windows Phone上使用WebBrowser控件显示静态Web内容。

- Paul Diston

---

非常感谢Paul！但是，如果我使用NavigateToString方法在Webbrowser上进行操作，则整个HTML页面会以字符串形式出现。由于某种原因，如果我以这种方式操作，图像将无法正常工作。：S - MrCornholio

顺便提一下，孤立的故事中只有图片无法使用NavigateToString。那些具有绝对Uri的图像可以使用。 - MrCornholio

你需要将字符串保存到独立存储中，并将WebBrowser控件的Base属性设置为保存文件（html、图像、css、javascript）的本地目录。 - MatthieuGD

嗨@Paul，有没有办法在使用NavigateToString时加载本地图片，因为我有多张图片需要根据用户选择动态加载图片。 - kartheek

Answer 2

在Windows Phone 8上，某些WinRT类可用，您可以获得应用程序隔离存储的文件系统路径。因此，IsoStorage中文件的绝对URL将是：

string URL = "file://" +
    Windows.Storage.ApplicationData.Current.LocalFolder.Path +
    "\\folder\\filename.png";

WebBrowser控件可以在使用NavigateToString()方法打开HTML时接受这样的URL。或者您可以将IsoStorage指定为基础路径，并在整个文档中使用相对URL。但是，isostore:URL无法正常工作，我已经尝试过了。ms-appx://local/也不行。

为了完整起见，您也可以非常类似地获取到应用程序资源的文件系统路径。那就是Windows.ApplicationModel.Package.Current.InstalledLocation.Path。

- Seva Alekseyev

---

很棒的答案。与NavigateToString完美配合。非常感谢 :-) - tobi.at

@SevaAlekseyev 重要提示：以上技术仅适用于存储中与Local文件夹同级别或者在Local文件夹下的目录。例如，我使用Path.GetTempPath()方法创建了一个名为Temp的与Local同级的目录。该目录中的文件无法被WebBrowser组件访问。将它们复制到Local文件夹即可解决此问题。 - Robert Oschler

Answer 3

这是一个非常古老的帖子，但我已经想出了一个解决方案，因为我们刚刚更新了一个WP7应用程序。

秘密在于首先将图像转换为base 64表示形式，因此请从以下代码开始：

    private string GetBase64(string f)
    {
        string ret = "";

        {
            StreamResourceInfo sr = Application.GetResourceStream(new Uri(f, UriKind.Relative));
            using (BinaryReader br = new BinaryReader(sr.Stream))
            {
                byte[] data = br.ReadBytes((int)sr.Stream.Length);
                ret = System.Convert.ToBase64String(data);
            }
        }
        return ret;
    }

现在，当你想要将一张图片（我的是gif格式）插入到代码中时，请使用以下代码：

StringBuilder sb = ... // a string builder holding your webpage
String b64 = GetBase64("assets/images/filename.gif");

sb.AppendFormat(@"<img src='data:image/gif;base64,{0}' /></div>", b64);

- Anthony Wieser

Answer 4

你可以通过动态连接上述 Paul 示例应用程序来动态更新数组，从而使用动态图像。

string[] files = {
        "readme.htm", "desert.jpg", "sample.jpg"
    };

在写入隔离文件之前，您可以删除现有的文件

       private void SaveFilesToIsoStore()
    {
        //These files must match what is included in the application package,
        //or BinaryStream.Dispose below will throw an exception.
        string[] files = {
        "readme.htm", "desert.jpg", "sample.jpg"
    };

        IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();
        if(isoStore.FileExists(files[0]))
        {
            isoStore.DeleteFile(files[0]);
        }

            foreach (string f in files)
            {
                StreamResourceInfo sr = Application.GetResourceStream(new Uri(f, UriKind.Relative));
                using (BinaryReader br = new BinaryReader(sr.Stream))
                {
                    byte[] data = br.ReadBytes((int)sr.Stream.Length);
                    SaveToIsoStore(f, data);
                }
            }
        }


    private void SaveToIsoStore(string fileName, byte[] data)
    {
        string strBaseDir = string.Empty;
        string delimStr = "/";
        char[] delimiter = delimStr.ToCharArray();
        string[] dirsPath = fileName.Split(delimiter);

        //Get the IsoStore.
        IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();

        //Re-create the directory structure.
        for (int i = 0; i < dirsPath.Length - 1; i++)
        {
            strBaseDir = System.IO.Path.Combine(strBaseDir, dirsPath[i]);
            isoStore.CreateDirectory(strBaseDir);
        }

        //Remove the existing file.
        if (isoStore.FileExists(fileName))
        {
            isoStore.DeleteFile(fileName);
        }

        //Write the file.
        using (BinaryWriter bw = new BinaryWriter(isoStore.CreateFile(fileName)))
        {
            bw.Write(data);
            bw.Close();
        }
    }

- charulatha krishnamoorthy