Getting Started
Medical image processing and visualization in the browser via WebAssembly.
The ImFusion Web SDK provides medical image processing and visualization capabilities in the browser via WebAssembly.
Quick Start
Add a canvas element to your HTML:
<canvas id="canvas"></canvas>Then initialize the SDK:
import { init } from '@imfusion/sdk';
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const imf = await init(canvas);Load and visualize data:
const data = await imf.loadFileFromUrl('/data/scan.nii.gz');
imf.showAll(data);See InitOptions for more initialization options, and ImFusion for the main API.
Loading Data
You can load data into the SDK module directly from an ArrayBuffer:
const buffer = await fetch('/scan.dcm').then((r) => r.arrayBuffer());
const data = await imf.loadBuffer(buffer, 'scan.dcm');There are also helper function to load file(s) from other sources:
// From URL
const data = await imf.loadFileFromUrl('/scan.nii.gz');
// From File input
const input = document.getElementById('fileInput') as HTMLInputElement;
const data = await imf.loadFile(input.files![0]);
// From folder (e.g. DICOM series)
const input = document.getElementById('folderInput') as HTMLInputElement;
const data = await imf.loadFolder(Array.from(input.files!));The following image and geometry/mesh formats are supported:
DICOM, NIFTI, PNG, OBJ, PLY, STL, OFF, ImFusionFile
Creating Images Programmatically
const width = 256,
height = 256,
slices = 100;
const pixels = new Float32Array(width * height * slices);
// Fill with data...
for (let i = 0; i < pixels.length; i++) {
pixels[i] = Math.random();
}
const image = imf.createImage({
dimensions: [width, height, slices],
channels: 1,
data: pixels,
});
const sis = imf.createSharedImageSet([image!]);
// Add to data model and display
imf.dataModel.add(sis);
imf.show(sis);React Integration
The @imfusion/sdk-react package provides React components and hooks for integrating the ImFusion Web SDK into React applications.
Start by wrapping your app with ImFusionProvider, rendering an ImFusionCanvas, and using the ready/loading/error components to handle SDK initialization:
import { ImFusionProvider, ImFusionCanvas, ImFusionReady, ImFusionLoading, ImFusionError } from '@imfusion/sdk-react';
function App() {
return (
<ImFusionProvider>
<ImFusionCanvas style={{ width: '100%', height: '100%' }} />
<ImFusionLoading>Initializing SDK...</ImFusionLoading>
<ImFusionError>{(error) => <p>Failed: {error.message}</p>}</ImFusionError>
<ImFusionReady>
<Viewer />
</ImFusionReady>
</ImFusionProvider>
);
}For loading data, use useDataLoader:
import { useDataLoader } from '@imfusion/sdk-react';
function LoadButton() {
const { loadFileFromUrl, isLoading, progress, error } = useDataLoader();
return (
<button onClick={() => loadFileFromUrl('/data/scan.nii.gz')} disabled={isLoading}>
{isLoading && progress ? `${Math.round((progress.received / (progress.total ?? 1)) * 100)}%` : 'Load'}
</button>
);
}For the full list of hooks and components, see the @imfusion/sdk-react module documentation.
Using Raw Bindings
The ImFusion Web SDK has two layers: C++ bindings compiled to WebAssembly, and a TypeScript wrapper that simplifies common tasks.
Wrapper
A high-level TypeScript API around the C++ bindings. Provides init which returns an ImFusion instance with convenience methods for loading and displaying data, automatic DPI scaling, input handling, and more.
C++ Bindings
The direct C++ functionality exposed to JavaScript. Use this when you need functionality not available on the ImFusion interface. You can access it directly via imf.bindings:
const options = imf.bindings.DisplayOptions2d.get(sis);
options.setWindowLevel(500, 50);