在Webbrowser控件中使用本地圖像

Question

我在Wp7應用程序中使用了Webbrowser控件，但似乎無法將Web瀏覽器中App目錄中的圖像放入。

我已經將一些圖像放在與.cs和.xaml文件位於同一目錄的文件夾中。 現在，我嘗試將其放入Web瀏覽器控件中，但似乎無法正常工作。

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

上面的兩個顯然不起作用，我猜應該是這樣的：

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

“ SilverlightApplication”和“ component”應替換為其他內容，但我不知道什么:(

Answer 1

您將需要將圖像存儲在隔離存儲中，然后從那里顯示圖像。 我整理了一個樣本，您可以從以下位置下載：-

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

這基於MSDN文章如何：使用Windows Phone的WebBrowser控件顯示靜態Web內容 。

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 。

Answer 3

很好，您可以通過連接上面給定的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();
        }
    }

Answer 4

這是一個非常老的線程，但是我想出了一個解決方案，因為我們今天才更新了WP7應用程序。

秘訣是首先將圖像轉換為基數為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);