UWP 앱 WebView의 로컬 폴더에서 이미지 표시

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 \ 이미지

내가 사용 시도 밀리 - APPDATA : /// local /, file : ///, 슬래시, 슬래시, img src의 모든 내용. 그러나 그들 중 누구도 이미지를로드하고 있지 않습니다.

위의 경로가 너무 길기 때문에 AppData \ Local \ Packages \ 1bf5b84a-6650-4124-ae7f-a2910e5e8991_egahdtqjx9ddg \ LocalState \ 1.png에 샘플 이미지가 있으며 다른 방식으로 액세스하려고합니다. 그들은 웹보기에서 그 이미지를 보여주고 있습니다. 하지만 브라우저에서 액세스 할 수 있습니다. 그리고 아래 코드에서 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과 액세스를 시도 다른 방법으로 그들 중 누구도 웹보기에서 그 이미지를 보이지 않습니다.

WebView에는 WinRT API 또는 WinRT Scheme을 사용할 수없는 웹 컨텍스트가 있습니다.

그러나 이미지를 Base64 DataUri으로 변환하여 웹보기로 전달할 수 있습니다. 그림을 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> 

그리고는 출력