ImFusion Web SDK
@imfusion/sdk

ImFusion

The main ImFusion Web SDK interface.

Properties

PropertyModifierTypeDescription
dataModelreadonlyDataModelData model containing the loaded datasets
displayreadonlyDisplayThe main display/rendering area
annotationModelreadonlyAnnotationModelAnnotation model containing the created annotations
brushreadonlyBrushBrush tool for painting on images
isAutoRenderPausedreadonlybooleanWhether auto-render is currently paused
dpiScalereadonlynumberGet the current DPI scale factor
isAutoResizePausedreadonlybooleanWhether auto-resize is currently paused
bindingsreadonlyMainModuleAccess the full bindings module for advanced operations
FSreadonlytypeof FSAccess the WASM filesystem
canvasreadonlyHTMLCanvasElementThe canvas the SDK renders into

Methods

MethodDescription
compatibleAlgorithms()List of Algorithms compatible with the given Data array
loadFile()Load data from a File.
loadFileFromUrl()Load a file from a URL.
loadFolder()Load related files together as one virtual folder.
loadFolderFromUrls()Load related files from URLs together as one virtual folder.
loadBuffer()Load data from an ArrayBuffer.
show()Show a dataset in the view group and center the view on it.
showAll()Show all datasets in the view group and center on the first one.
asHandleArray()Convert a plain array of ClassHandles into an alias-aware HandleArray.
onContextMenu()Register a callback for context menu events.
render()Render the display
pauseAutoRender()Pause automatic rendering.
resumeAutoRender()Resume automatic rendering.
setDpiScale()Update the DPI scale factor and refresh the display
updateSize()Update the display size
pauseAutoResize()Pause automatic canvas resizing.
resumeAutoResize()Resume automatic canvas resizing and apply any pending size updates.
createCustomGlObject()Create a custom object that can be added to the Display
createImage()Create an Image from raw pixel data.
createSharedImageSet()Create a SharedImageSet.
createGraph()Create an empty Graph.
createMesh()Create an empty Mesh.
destroy()Release browser-side resources (ResizeObserver, canvas event listeners, pending animation frames).

compatibleAlgorithms()

ts
compatibleAlgorithms(data: Data[]): AlgorithmList;

List of Algorithms compatible with the given Data array

Parameters

ParameterType
dataData[]

Returns

AlgorithmList

loadFile()

ts
loadFile(file: File, options?: {
  format?: FileFormat;
}): Promise<HandleArray<Data>>;

Load data from a File.

Parameters

ParameterTypeDescription
fileFile-
options?{ format?: FileFormat; }-
options.format?FileFormatThe file format. If omitted, the SDK tries to automatically detect it from the filename extension, then file content if no known extension is present.

Returns

Promise<HandleArray<Data>>

See

Object Ownership and Aliasing

loadFileFromUrl()

ts
loadFileFromUrl(url: string, options?: {
  format?: FileFormat;
  onProgress?: ProgressCallback;
  signal?: AbortSignal;
}): Promise<HandleArray<Data>>;

Load a file from a URL.

Parameters

ParameterTypeDescription
urlstringURL to fetch data from
options?{ format?: FileFormat; onProgress?: ProgressCallback; signal?: AbortSignal; }-
options.format?FileFormatThe file format. If omitted, the SDK tries to automatically detect it from the filename extension, then file content if no known extension is present. The filename comes from the Content-Disposition header, falling back to the last URL component.
options.onProgress?ProgressCallbackCallback called on download progress.
options.signal?AbortSignalAborts the data fetch if the signal is aborted.

Returns

Promise<HandleArray<Data>>

See

loadFolder()

ts
loadFolder(files: File[]): Promise<HandleArray<Data>>;

Load related files together as one virtual folder.

Use this for formats whose logical data depends on multiple files, such as DICOM series or meshes with separate material or texture files.

Each file's relative path inside the folder is preserved. For files produced by <input webkitdirectory> this comes automatically from webkitRelativePath. Otherwise the file's name is used (forward slashes in name are honored, e.g. new File([blob], 'series-1/IM-0001.dcm')).

Parameters

ParameterTypeDescription
filesFile[]Array of files

Returns

Promise<HandleArray<Data>>

See

loadFolderFromUrls()

ts
loadFolderFromUrls(urls: readonly string[], options?: {
  onProgress?: ProgressCallback;
  signal?: AbortSignal;
  concurrency?: number;
}): Promise<HandleArray<Data>>;

Load related files from URLs together as one virtual folder.

Use this for formats whose logical data depends on multiple files, such as DICOM series or meshes with separate material or texture files.

Each URL's relative path inside the folder is inferred from the longest common pathname prefix (truncated to a / boundary). So

ts
imf.loadFolderFromUrls([
  'https://example.com/scans/123/A/1.dcm',
  'https://example.com/scans/123/A/2.dcm',
  'https://example.com/scans/123/B/1.dcm',
]);

creates this virtual folder:

text
virtual-folder/
├── A/
│   ├── 1.dcm
│   └── 2.dcm
└── B/
    └── 1.dcm

Fetches run with bounded concurrency (default 6). Any URL already warmed via prefetch is consumed from the cache. Aborting options.signal cancels all in-flight fetches and rejects the operation.

All URLs must share the same origin. If you need to combine files from different origins, fetch them yourself and pass File objects to loadFolder.

Parameters

ParameterTypeDescription
urlsreadonly string[]File URLs to fetch as a single virtual folder
options?{ onProgress?: ProgressCallback; signal?: AbortSignal; concurrency?: number; }-
options.onProgress?ProgressCallbackAggregate download progress across all entries.
options.signal?AbortSignalAborts all in-flight fetches if the signal is aborted.
options.concurrency?numberMaximum number of fetches in flight (default 6).

Returns

Promise<HandleArray<Data>>

See

loadBuffer()

ts
loadBuffer(
   buffer: ArrayBufferLike,
   filename: string,
   options?: {
  format?: FileFormat;
}): Promise<HandleArray<Data>>;

Load data from an ArrayBuffer.

Parameters

ParameterTypeDescription
bufferArrayBufferLikeThe raw file data
filenamestringThe filename. This is used for the dataset name if not otherwise specified, and for detecting the file format if no format is explicitly provided.
options?{ format?: FileFormat; }-
options.format?FileFormatThe file format. If omitted, the SDK tries to automatically detect it from the filename extension, then file content if no known extension is present.

Returns

Promise<HandleArray<Data>>

See

Object Ownership and Aliasing

show()

ts
show(data: Data): void;

Show a dataset in the view group and center the view on it.

Parameters

ParameterType
dataData

Returns

void

showAll()

ts
showAll(data: Data[]): void;

Show all datasets in the view group and center on the first one.

Parameters

ParameterType
dataData[]

Returns

void

asHandleArray()

ts
asHandleArray<T>(arr: T[]): HandleArray<T>;

Convert a plain array of ClassHandles into an alias-aware HandleArray.

Type Parameters

Type Parameter
T extends ClassHandle

Parameters

ParameterType
arrT[]

Returns

HandleArray<T>

See

Object Ownership and Aliasing

onContextMenu()

ts
onContextMenu(callback: (menu: Menu, event: Event) => void): () => void;

Register a callback for context menu events. Called when the SDK returns a context menu from an input event.

Parameters

ParameterTypeDescription
callback(menu: Menu, event: Event) => voidReceives the Menu and the Event that triggered it.

Returns

Unsubscribe function

() => void

render()

ts
render(): void;

Render the display

Returns

void

pauseAutoRender()

ts
pauseAutoRender(): void;

Pause automatic rendering.

Returns

void

resumeAutoRender()

ts
resumeAutoRender(): void;

Resume automatic rendering.

Returns

void

setDpiScale()

ts
setDpiScale(scale: number): void;

Update the DPI scale factor and refresh the display

Parameters

ParameterType
scalenumber

Returns

void

updateSize()

ts
updateSize(): void;

Update the display size

Returns

void

pauseAutoResize()

ts
pauseAutoResize(): void;

Pause automatic canvas resizing.

Returns

void

resumeAutoResize()

ts
resumeAutoResize(): void;

Resume automatic canvas resizing and apply any pending size updates.

Returns

void

createCustomGlObject()

ts
createCustomGlObject(customGlObject: CustomGlObject, typeName: string): GlObject;

Create a custom object that can be added to the Display

Parameters

ParameterTypeDescription
customGlObjectCustomGlObjectthe CustomGlObject to wrap in a GlObject
typeNamestringUnique identifier for this object class used for serialization

Returns

GlObject

A custom Gl Object that can be added to individual views via View.addObject()

See

Custom Rendering tutorial for more information about integrating your own custom rendering into ImFusion Web SDK displays.

Memory Management: The created GlObject is owned by JavaScript and must be cleaned up by calling object.delete() after removing it from the views via View.removeObject()

createImage()

ts
createImage(options: CreateImageOptions): Image | null;

Create an Image from raw pixel data.

This is a convenience method that wraps ImageDescriptor and Image.fromTypedArray constructors.

Parameters

ParameterTypeDescription
optionsCreateImageOptionsImage creation options

Returns

Image | null

The created Image, or null if creation failed

Example

ts
const data = new Float32Array(256 * 256 * 100);
// ... fill data with pixel values ...

using image = imf.createImage({
  dimensions: [256, 256, 100],
  channels: 1,
  data,
});

See

Object Ownership and Aliasing.

Memory Management: The created image is owned by JavaScript and must be cleaned up:

  • Manual cleanup: Call image.delete() when done
  • Explicit Resource Management (TypeScript 5.2+): Use using image = imf.createImage(...)

createSharedImageSet()

ts
createSharedImageSet(images?: Image[]): SharedImageSet;

Create a SharedImageSet.

Parameters

ParameterTypeDescription
images?Image[]Array of Images to add to the set

Returns

SharedImageSet

A new SharedImageSet containing the provided images

Example

ts
using image = imf.createImage({ ... });
using sis = imf.createSharedImageSet([image!]);
imf.dataModel.add(sis); // persist the image in the data model
imf.show(sis);

See

Object Ownership and Aliasing.

Memory Management: The created SharedImageSet is owned by JavaScript and must be cleaned up:

  • Manual cleanup: Call sis.delete() when done
  • Explicit Resource Management (TypeScript 5.2+): Use using sis = imf.createSharedImageSet(...)

createGraph()

ts
createGraph(options?: {
  type?: GraphType;
  dimension?: GraphDimension;
}): Graph;

Create an empty Graph.

Parameters

ParameterTypeDescription
options?{ type?: GraphType; dimension?: GraphDimension; }Graph creation options. type defaults to 'Undirected' and dimension defaults to 'Dimension3D'.
options.type?GraphType-
options.dimension?GraphDimension-

Returns

Graph

A new Graph

See

Object Ownership and Aliasing.

Memory Management: The created graph is owned by JavaScript and must be cleaned up:

  • Manual cleanup: Call graph.delete() when done
  • Explicit Resource Management (TypeScript 5.2+): Use using graph = imf.createGraph()

createMesh()

ts
createMesh(options?: EmbindString): Mesh;

Create an empty Mesh.

Parameters

ParameterTypeDescription
options?EmbindStringMesh creation options. name defaults to ''

Returns

Mesh

A new Mesh

See

Object Ownership and Aliasing.

Memory Management: The created mesh is owned by JavaScript and must be cleaned up:

  • Manual cleanup: Call mesh.delete() when done
  • Explicit Resource Management (TypeScript 5.2+): Use using mesh = imf.createMesh()

destroy()

ts
destroy(): void;

Release browser-side resources (ResizeObserver, canvas event listeners, pending animation frames).

Returns

void

ImageInfoPatientSex

Previous Page

init

Next Page

On this page

PropertiesMethodscompatibleAlgorithms()loadFile()loadFileFromUrl()loadFolder()loadFolderFromUrls()loadBuffer()show()showAll()asHandleArray()onContextMenu()render()pauseAutoRender()resumeAutoRender()setDpiScale()updateSize()pauseAutoResize()resumeAutoResize()createCustomGlObject()createImage()createSharedImageSet()createGraph()createMesh()destroy()