UWP應用程序顯示來自WebView中的本地文件夾的圖像

我正在研究支持Windows 8.1和10的UWP應用程序。在那裏我有一個WebView，我使用NavigateToString在代碼中設置了一些html。我需要顯示Appdata文件夾中的一些圖像，例如應用程序數據\本地\包\ 1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg \ LocalState \ c9dfd4d5-d8a9-41c6-bd08-e7f4ae70e423 \ 4f31f54f-1b5b-4812-9463-ba23ea7988a0 \圖片UWP應用程序顯示來自WebView中的本地文件夾的圖像

我已經嘗試使用MS-APPDATA ：/// local /，file：///，正斜槓，反斜槓在img src中的所有內容。但是他們都沒有加載圖像。

由於上述路徑太長，我在應用程序數據\本地\包\ 1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg \ LocalState \都不1.png並試圖訪問它以不同的方式，有一個樣本圖像他們正在網絡視圖中顯示該圖像。但我可以從瀏覽器訪問它。如果我在下面的代碼中給出img src的http url，它就可以工作。

請讓我知道如何在WebView的LocalState文件夾中顯示圖像。

e.g 1.

string figures = "<figure><img src=\"ms-appdata:///local/1.png\" alt =\"aaa\" height=\"400\" width=\"400\"/><figcaption>Figure : thumb_IMG_0057_1024</figcaption></figure>"; 
procedureWebView.NavigateToString(figures);

例如2

string figures = "<figure><img src='file:///C://Users//xxx//AppData//Local//Packages//1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg//LocalState//1.png' alt=\"thumb_IMG_0057_1024\" height=\"100\" width=\"100\"/><figcaption>Figure : thumb_IMG_0057_1024</figcaption></figure>";

來源

2016-08-08 Madhu

由於上述路徑太長，我必須在應用程序數據\本地\套餐樣本圖像\ 1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg \ LocalState \ 1.png，並試圖對其進行訪問以不同的方式，他們都沒有在Web視圖中顯示該圖像。

WebView擁有一個web上下文，它無法訪問WinRT API或使用WinRT方案。

但是，您可以將圖像轉換爲Base64 DataUri並將其傳遞到您的webview。有關將圖片轉換爲Base64 DataUri的詳細信息，請參閱Reading and Writing Base64 in the Windows Runtime。

閱讀博客後，我做了一個basic demo併成功將圖像傳遞給webview。 MainPage.xaml.cs中：

private async Task<String> ToBase64(byte[] image, uint height, uint width, double dpiX = 96, double dpiY= 96) 
{ 
    var encoded = new InMemoryRandomAccessStream(); 
    var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, encoded); 
    encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, height, width, dpiX, dpiY, image); 
    await encoder.FlushAsync(); 
    encoded.Seek(0); 

    var bytes = new byte[encoded.Size]; 
    await encoded.AsStream().ReadAsync(bytes, 0, bytes.Length); 
    return Convert.ToBase64String(bytes); 
} 

private async Task<String> ToBase64(WriteableBitmap bitmap) 
{ 
    var bytes = bitmap.PixelBuffer.ToArray(); 
    return await ToBase64(bytes, (uint)bitmap.PixelWidth, (uint)bitmap.PixelHeight); 
} 

private async void myBtn_Click(object sender, RoutedEventArgs e) 
{ 

    StorageFile myImage = await GetFileAsync(); 

    ImageProperties properties = await myImage.Properties.GetImagePropertiesAsync(); 
    WriteableBitmap bmp = new WriteableBitmap((int)properties.Width, (int)properties.Height); 
    bmp.SetSource(await myImage.OpenReadAsync()); 
    String dataStr=await ToBase64(bmp); 
    String fileType = myImage.FileType.Substring(1); 
    String str = "<figure><img src=\"data:image/"+myImage.FileType+";base64,"+dataStr+"\" alt =\"aaa\" height=\"400\" width=\"400\"/><figcaption>Figure : thumb_IMG_0057_1024</figcaption></figure>"; 

    myWebView.NavigateToString(str); 
} 

private async Task<StorageFile> GetFileAsync() 
{ 
    StorageFile myImage = await ApplicationData.Current.LocalFolder.GetFileAsync("myImage.jpg"); 
    return myImage; 
}

MainPage.xaml中：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel VerticalAlignment="Center"> 
     <WebView Name="myWebView" Width="500" Height="500" ></WebView> 
     <Button Name="myBtn" Click="myBtn_Click">Click Me to Load WebView</Button> 
    </StackPanel> 
</Grid>

這裏是輸出：

來源

2016-08-09 08:10:20

UWP應用程序顯示來自WebView中的本地文件夾的圖像

回答

相關問題