Getting Started

npm install @imfusion/sdk

<canvas id="canvas"></canvas>

import { init } from '@imfusion/sdk';

const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const imf = await init(canvas);

const data = await imf.loadFileFromUrl('/data/scan.nii.gz');
imf.showAll(data);

const buffer = await fetch('/scan.dcm').then((r) => r.arrayBuffer());
const data = await imf.loadBuffer(buffer, 'scan.dcm');

// 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!));

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);

npm install @imfusion/sdk @imfusion/sdk-react

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>
  );
}

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>
  );
}

const options = imf.bindings.DisplayOptions2d.get(sis);
options.setWindowLevel(500, 50);