WebViewのローカルフォルダからUWPアプリの画像を表示

Question

Windows 8.1と10の両方をサポートするUWPアプリで作業しています。NavigateToStringを使用してコードに生成されたHTMLをWebViewに設定しました。そこには、Appdataフォルダにあるいくつかの画像を表示する必要があります。 AppData \ローカル\パッケージ\ 1bf5b84a-6650から4124-ae7f-a2910e5e8991_egahdtqjx9ddg \ LocalState \ c9dfd4d5-d8a9-41c6-bd08-e7f4ae70e423 \ 4f31f54f-1b5b-4812から9463-ba23ea7988a0 \画像

私は、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>"; 

Answer 1

、私は\のAppData \ローカル\パッケージでサンプル画像を持っている1bf5b84a-6650から4124-ae7f-a2910e5e8991_egahdtqjx9ddg \ LocalState \ 1.pngとそれにアクセスしようとしていますWebビューでその画像を表示している人はいません。

WebViewには、WinRT APIまたはWinRT Schemeを使用しないWebコンテキストがあります。

しかし、画像を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> 

そして、ここでは出力されます：