docs(ItkWasmVolumeExample): update to use @itk-wasm/image-io

ITK-Wasm image-io is now distributed in its own package, @itk-wasm/image-io. It is available as an ESM bundle. We load this with a dynamic import. readImageArrayBuffer is now readImage. The `webWorker` argument is not required. Data is pased as object with a `data` Uint8Array and path string.
Kitware · Jan 31, 2024 · 5da4de7 · 5da4de7
1 parent a523323
commit 5da4de7
Showing 1 changed file with 12 additions and 14 deletions.
diff --git a/Examples/Volume/ItkWasmVolume/index.js b/Examples/Volume/ItkWasmVolume/index.js
@@ -3,9 +3,6 @@ import '@kitware/vtk.js/favicon';
 // Load the rendering pieces we want to use (for both WebGL and WebGPU)
 import '@kitware/vtk.js/Rendering/Profiles/Volume';
 
-// Load the itk-wasm UMD module dynamically for the example.
-// Normally, this will just go in the HTML <head>.
-import vtkResourceLoader from '@kitware/vtk.js/IO/Core/ResourceLoader';
 // Fetch the data. Other options include `fetch`, axios.
 import vtkLiteHttpDataAccessHelper from '@kitware/vtk.js/IO/Core/DataAccessHelper/LiteHttpDataAccessHelper';
 
@@ -63,11 +60,19 @@ async function update() {
     `https://data.kitware.com/api/v1/file/5d2a36ff877dfcc902fae6d9/download`
   );
 
-  const { image: itkImage, webWorker } = await window.itk.readImageArrayBuffer(
-    null,
-    volumeArrayBuffer,
-    'knee.mha'
+  // Load the itk-wasm ESM module dynamically for the example.
+  // This can also will go in the HTML <head>.
+  // Or `npm install @itk-wasm/image-io` and import it directly.
+  const { readImage } = await import(
+    // eslint-disable-next-line import/no-unresolved, import/extensions
+    /* webpackIgnore: true */ 'https://cdn.jsdelivr.net/npm/@itk-wasm/[email protected]/dist/bundle/index-worker-embedded.min.js'
   );
+
+  const { image: itkImage, webWorker } = await readImage({
+    data: new Uint8Array(volumeArrayBuffer),
+    path: 'knee.mha',
+  });
+  // Optionally terminate the web worker when it is no longer needed
   webWorker.terminate();
 
   const vtkImage = vtkITKHelper.convertItkToVtkImage(itkImage);
@@ -82,13 +87,6 @@ async function update() {
 }
 update();
 
-// After the itk-wasm UMD script has been loaded, `window.itk` provides the itk-wasm API.
-vtkResourceLoader
-  .loadScript(
-    'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/itk-wasm.js'
-  )
-  .then(update);
-
 // -----------------------------------------------------------
 // Make some variables global so that you can inspect and
 // modify objects in your browser's developer console: