在 UWP WebView 控件中显示资源映射图像

Question

在这个link

它向我们展示了如何通过使用 ResourceMap 将文本和图像的内容分享出去HTML。

但是相应的article并没有向我们展示如何正确读取它并将其放入webview中。

我知道如何取回资源映射，但我不知道如何最好地将它放入 WebView。

this.sharedResourceMap = await this.shareOperation.Data.GetResourceMapAsync();
foreach (KeyValuePair<string, RandomAccessStreamReference> item in this.sharedResourceMap)
{
    ResourceMapValue.Text += "\nKey: " + item.Key;
}

Item.Key 类似于 ms-appx:///Assets/Logo.png

Answer 1

您应该利用 class IUriToStreamResolver。

在下面的示例中，我加载了位于 Assets 文件夹中的 HTML 文件 (example.html)。 Assets 文件夹还包含 HTML 文件的所有图像。应覆盖 IUriToStreamResolver 的 GetContent 方法，以将任何对 HTML 文件中指定的 URI（例如）的请求转换为本地 uri 路径。在您的情况下，您可能需要调整 GetContent 以便检索资源映射存储的文件。

public sealed partial class WebViewLocalImage : Page
{
    public WebViewLocalImage()
    {
        this.InitializeComponent();
        Loaded += MainPage_Loaded;
    }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        var uri = this.myWebView.BuildLocalStreamUri("InternalAssets", "example.html");
        this.myWebView.NavigateToLocalStreamUri(uri, new StreamUriResolver());
    }
}

public sealed class StreamUriResolver : IUriToStreamResolver
{
    public IAsyncOperation<IInputStream> UriToStreamAsync(Uri uri)
    {
        string path = uri.AbsolutePath;
        return GetContent(path).AsAsyncOperation();
    }

    private async Task<IInputStream> GetContent(string URIPath)
    {
        try
        {
            Uri localUri = new Uri("ms-appx:///Assets/" + URIPath);
            StorageFile f = await StorageFile.GetFileFromApplicationUriAsync(localUri);
            IRandomAccessStream stream = await f.OpenAsync(FileAccessMode.Read);
            return stream.GetInputStreamAt(0);
        }
        catch (Exception)
        {
            System.Diagnostics.Debug.WriteLine("Invalid URI");
        }
        return null;
    }
}

在 UWP WebView 控件中显示资源映射图像

Display resource map image in UWP WebView Control

c#

xaml

webview

win-universal-app

uwp