How to read data from blob file?

Question

My web application (JavaScript+HTML) is loaded into WebView and runs as a native UWP app. This app creates an image, gets image data as a blob and returns blob path (blob:ms-appx-web://5c9b0d94-65fd-4fa7-aded-837e3428129f/97ed6fc2-8ac9-445b-a3e1-1ff7b1d42d59) to ScriptNotify event of the host application WebView.

I need to read data from this blob file. What is the correct way to read data from the blob file?

score 3 · Accepted Answer · answered Apr 24 '18 at 06:05

The blob object is created by Javascript API, and the blob object URL is created by method createObjectURL also in Javascript. This object URL that format with blob:ms-appx-web://... is recognized by HTML but may not be recognized by UWP APIs.

To read the blob data, you could create Data URLs for the image blob object instead. Data URLs prefixed with the data: scheme and data encoded into base64 format. Then in UWP the base64 data could be converted to image source.

Details for how to convert image into base64 string using javascript please reference this thread.The following is just for example:

.html

<head>
    <script type='text/javascript'> 
        function toDataURL(url, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                var reader = new FileReader();
                reader.onloadend = function () {
                    callback(reader.result);
                }
                reader.readAsDataURL(xhr.response);
            };
            xhr.open('GET', url);
            xhr.responseType = 'blob';
            xhr.send();
        }

        toDataURL('https://....jpeg', function (dataUrl) { 
            window.external.notify(dataUrl);
            document.querySelector("#image").src = dataUrl;
        })
    </script>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="myDiv"> 
        <image id="image" />
    </div>
</body>

xaml.cs

private void Webview_ScriptNotify(object sender, NotifyEventArgs e)
{
    var result = e.Value;
    resultimage = result.Substring(result.IndexOf(",")+1);
}

private async void btngetblob_Click(object sender, RoutedEventArgs e)
{ 
    byte[] imageBytes = Convert.FromBase64String(resultimage);
    StorageFolder storageFolder = await KnownFolders.GetFolderForUserAsync(null /* current user */, KnownFolderId.PicturesLibrary);
    StorageFile file = await storageFolder.CreateFileAsync("new.jpg", CreationCollisionOption.ReplaceExisting);
    using (IRandomAccessStream randomstream = await file.OpenAsync(FileAccessMode.ReadWrite))
    {
        DataWriter writer = new DataWriter(randomstream);
        writer.WriteBytes(imageBytes);
        await writer.StoreAsync();
        await writer.FlushAsync(); 
    }
}

How to read data from blob file?

1 Answers1