UWP 应用显示来自 Web 视图中本地文件夹的图像

Posted 2023-04-13

【中文标题】UWP 应用显示来自 Web 视图中本地文件夹的图像

【英文标题】：UWP app show image from the Local folder in the WebView

【发布时间】：2016-12-14 08:38:41

【问题描述】：

我正在开发一个同时支持 Windows 8.1 和 10 的 UWP 应用程序。我有一个 WebView，我使用 NavigateToString 在代码中生成了一些 html。在那里我需要显示一些在 Appdata 文件夹中的图像，例如AppData\Local\Packages\1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg\LocalState\c9dfd4d5-d8a9-41c6-bd08-e7f4ae70e423\4f31f54f-1b5b-4812-9463-ba23ea7980图片>

我尝试使用 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);

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

【参考方案1】：

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

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

但是您可以将图像转换为 Base64 DataUri 并将其传递给您的 web 视图。图片转Base64 DataUri的详细内容可以参考Reading and Writing Base64 in the Windows Runtime。

看完Blog，发了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>

这是输出：