¿Cómo puedo cargar y procesar un volumen de imagen 3D, guardado como un archivo hdf5, directamente en la interfaz utilizando JS?
Esto se puede lograr usando jsfive y numjs .
El siguiente código corta una imagen de 124x124 , en z=10 , y0=0 , y1=124 , x0=0 , x1=124 , de un volumen de dimensión 20x1400x700 (z,y,x). El volumen 3D se almacena en el archivo h5 bajo la clave 'principal'. La implementación utiliza una devolución de llamada que brinda más flexibilidad y hace que el archivo h5 esté disponible fuera de la función asíncrona.
$(document).ready(function() { $("#datafile").change(async function loadData() { const reader = new FileReader(); let file = $("#datafile")[0].files[0] let file_name = file.name reader.readAsArrayBuffer($("#datafile")[0].files[0]); reader.onload = () => storeResults(reader.result, file_name); }) // callback function function storeResults(result, file_namet) { f = new hdf5.File(result, file_namet); let array = f.get('main').value // jsfive can only return 1D arrays from a read operation -> use numjs to reconstruct the 3D volume array = nj.array(array).reshape(20, 1400, 700) // slicing a 124x124 image from the volume // use reshape to drop the channel dimension 1x124x124 -> 124x124 let img = array.slice([10, 11], [0, 124], [0, 124]).reshape(124, 124) // convert to image and save to canvas let resized = nj.images.resize(img, 124, 124) let $original = document.getElementById('original'); $original.width = 124; $original.height = 124; nj.images.save(resized, $original); console.log("done") } }) <!DOCTYPE html> <html lang="eng"> <head> <!-- 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"></script> <!-- Import NumJs--> <script src="https://cdn.jsdelivr.net/gh/nicolaspanel/numjs@0.15.1/dist/numjs.min.js"></script> </head> <body> <div> <h3>Original image (h<span id="h"></span>, w<span id="w"></span>)</h3> <canvas id="original" width=64 height=64></canvas> </div> <input type="file" id="datafile" name="file"> <!-- Import main JS --> <script src="app.js"></script> </body> </html>