logo标签列表

如何在浏览器内使用JavaScript读取hdf5文件

javascriptnode.jsbrowserifyhdf5
8
我有一个使用C++应用程序创建的hdf5文件。我想使用JavaScript在浏览器内读取相同的hdf5文件。
通过xhr或web套接字请求从服务器下载hdf5文件，文件内容将存储在JavaScript变量中，然后我想读取变量的内容。
请告诉我是否有任何JavaScript库可用于在浏览器内读取hdf5。
我尝试了 "https://github.com/HDF-NI/hdf5.node"，但它仅支持nodejs。
是否可能转换上述库以支持在浏览器内读取？
请问您使用了哪个C++应用程序来生成hdf5文件？这将有助于我们了解在您的情况下可能适用的类似技术。 - Hafizur Rahman
C++ 应用程序将会把 3D 几何数据，例如顶点和法线，写入 HDF5 文件中，并且同一个文件将会被用于 JavaScript 中通过 WebGL 在网页浏览器中进行渲染。我使用了 [链接] (https://support.hdfgroup.org/HDF5/doc/cpplus_RM/index.html)。 - Srinivas
C++ 应用程序将创建包含顶点和法线等 3D 几何数据的 hdf5 文件，并且该文件将在 JavaScript 中使用 Webgl 渲染在 Web 浏览器中。我使用了 hdf5 1.10 版本和此链接 link。 - Srinivas
@Srinivas，你找到解决办法了吗？ - Brian Bienvenu
@Brian Bienvenu 我没有找到解决方案。我使用自定义二进制文件而不是hdf5。 - Srinivas
2个回答
2
1
我找到的最好的两个库是jsfive和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);
})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接