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中的本地文件夹的图像

回答

相关问题