Question

我的Web应用程序（JavaScript + HTML）已加载到WebView中，并作为本机UWP应用程序运行。此应用程序创建一个图像，将图像数据作为blob获取并将blob路径（blob：ms-appx-web：// 5c9b0d94-65fd-4fa7-aded-837e3428129f / 97ed6fc2-8ac9-445b-a3e1-1ff7b1d42d59）返回到ScriptNotify事件主机应用程序WebView。

我需要从这个blob文件中读取数据。从blob文件中读取数据的正确方法是什么？

Answer 1

blob对象由Javascript API创建，blob对象URL也由方法createObjectURL在Javascript中创建。格式为blob:ms-appx-web://...的此对象网址由HTML识别，但UWP API可能无法识别。

要读取blob数据，可以为图像blob对象创建Data URLs。数据URL前缀为数据：方案和编码为base64格式的数据。然后在UWP中，base64数据可以转换为图像源。

有关如何使用javascript将图像转换为base64字符串的详细信息，请参阅this thread。以下仅作为示例：

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(); 
    }
}

如何从blob文件中读取数据？

1 个答案: