如何在浏览器中读取 javascript 中的 hdf5 文件

Question

我有使用 C++ 创建的 hdf5 文件 application.i 想使用 javascript.

在浏览器中读取相同的 hdf5 文件

Hdf5 文件将使用 xhr 或 web 套接字请求从服务器下载，文件内容将存储在 javascript 变量中，然后我想读取变量的内容。

请告诉我任何可用于在浏览器中读取 hdf5 的 javascript 库。

我试过“https://github.com/HDF-NI/hdf5.node”，但它只支持 nodejs。

是否可以转换上述库以支持在浏览器中阅读。

Answer 1

它只能读取 HDF5 文件的一个子集，但这是可行的： https://github.com/usnistgov/jsfive

它基本上涵盖了 pyfive 库 (https://github.com/jjhelmus/pyfive) 可以读取的所有文件，因为它是该库的直接端口。

Answer 2

我找到的最好的两个库是 jsfive and h5wasm:

示例代码jsfive:

$(document).ready(function() {
    $("#datafile").change(async function loadData() {
        var file_input = $("#datafile")[0];
        var file = file_input.files[0]; // only one file allowed
        let datafilename = file.name;
        let reader = new FileReader();
        reader.onloadend = function(evt) { 
          let barr = evt.target.result;
          var f = new hdf5.File(barr, datafilename);
          let value = f.get('main').value
          let attrs = f.get('main').attrs
          // do somthing with f
        }
    })
})

<!DOCTYPE html>
<html lang="eng">

<head>
</head>

<body>

  <input type="file" id="datafile" name="file">
  
  <!-- Import JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <!-- Import JSFive -->
  <script src="https://cdn.jsdelivr.net/npm/jsfive@0.3.7/dist/hdf5.js">
    <!-- Import main JS -->
    <
    script src = "app.js" >
  </script>
</body>

</html>

示例代码h5wasm:

import * as hdf5 from "https://cdn.jsdelivr.net/npm/h5wasm@latest/dist/esm/hdf5_hl.js";

await hdf5.ready;

$(document).ready(function() {
    $("#datafile").change(async function loadData() {
        let file = $("#datafile")[0].files[0];
        let data_filename = file.name;
        let ab = await file.arrayBuffer();
        hdf5.FS.writeFile(data_filename, new Uint8Array(ab));
        let f = new hdf5.File(data_filename, "r");
        // do somthing with f
        f.close()
    })
})

<!DOCTYPE html>
<html lang="eng">

<head>
</head>

<body>
    <input type="file" id="datafile" name="file">

    <!-- Import JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Import main JS -->
    <script type="module" src="app.js" ></script>
</body>

</html>

也很有趣 jsfive 回调：

function storeTarget(result, file_name) {
  f = new hdf5.File(result, file_name);
}

$("#datafile").change(async function loadSource() {
    var file_input = $("#datafile")[0];
    var file = file_input.files[0];
    let datafilename = file.name;
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = () => storeTarget(reader.result, datafilename);
})

如何在浏览器中读取 javascript 中的 hdf5 文件

How to read hdf5 file in javascript inside browser

javascript

hdf5

node.js

browserify