UWP应用程序显示WebView中Local文件夹中的图像

Question

我正在开发一个支持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 \ IMAGES

我尝试过使用ms-appdata：/// local /，file：///，正斜杠，反斜杠img src中的所有内容。但他们都没有加载图像。

由于上面的路径太长，我在AppData \ Local \ Packages \ 1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg \ LocalState \ 1.png中有一个示例图像，并试图以不同的方式访问它，但没有一个在Web视图中显示该图像。但我可以从浏览器访问它。 如果我在下面的代码中为img src提供了一个http url，那就可以了。

请告诉我如何在WebView的LocalState文件夹中显示图片。

例如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);

e.g。 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>";

Answer 1

  

由于上面的路径太长，我在AppData \ Local \ Packages \ 1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg \ LocalState \ 1.png中有一个示例图像，并试图以不同的方式访问它，但没有一个正在网页视图中显示该图片。

WebView拥有一个Web上下文，无法访问WinRT API或使用WinRT Scheme。

但您可以将图片转换为Base64 DataUri并将其传递给您的网页浏览。有关将图片转换为Base64 DataUri的详细信息，请参阅Reading and Writing Base64 in the Windows Runtime。

阅读博客后，我制作了basic demo并成功将图片传递给了网页浏览。 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>

这是输出：