ImFusion Web SDK

The ImFusion Web SDK brings medical image processing and visualization to the browser. It provides a WebAssembly build of the ImFusion SDK, with JavaScript and TypeScript APIs for loading, processing, and displaying medical images in web applications.

For React applications, see @imfusion/sdk-react.

Documentation: docs.imfusion.com/websdk.

See websdk-demo.imfusion.com for a live demo.

Getting Started

Install the package:

npm install @imfusion/sdk

Add a canvas to your page:

html

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

Initialize the SDK, then load and display a dataset:

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

License

Use of this package is governed by the ImFusion end user license agreement, included as LICENSE.txt in the package.

ImFusion Web SDK

Example

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

const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const imf = await init(canvas, { autoResize: true });

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

Interfaces

Interface	Description
ImFusion	The main ImFusion Web SDK interface.
InitOptions	Options for initializing the ImFusion Web SDK wrapper.
CreateImageOptions	Options for creating an Image from pixel data (see createImage()).
CustomGlObject	Interface for defining a custom GL Object
WasmModule	-
ClassHandle	Base interface for JS handles that refer to underlying C++ objects.
HandleArray	Array of ClassHandles with alias-aware membership checks.
AlgorithmList	List of Algorithms as returned e.g. from compatibleAlgorithms
Algorithm	An Algorithm instance as returned by e.g. compatibleAlgorithms
Animation	An Animation as returned by MainModule#runAnimation or MainModule#runLoopedAnimation. Can be used to cancel an animation early.
Annotation	An annotation.
AnnotationModel	Container class holding all annotations. Annotations have unique IDs and each belongs to a dataset.
Brush	Class that allows enabling/disabling and setting options for the Brush.
Camera	Models the extrinsic (position/orientation) and intrinsic (projection) parameters of a camera.
Data	A dataset held by the Web SDK.
ImageDescriptor	Struct describing the essential properties of an image.
ImageDescriptorWorld	Convenience struct extending an ImageDescriptor to also include a matrix describing the image orientation in world coordinates.
ImageInfo	DataComponent storing general information on the image origin.
Image	Image shared on multiple devices
SharedImageSet	Set of images independent of their storage location.
SharedImageSetList	Base interface for JS handles that refer to underlying C++ objects.
DataModel	Observable collection of datasets with unique names.
IntegerList	Wrapper for a C++ vector of integers.
View	A single rendering view (e.g. single anatomical plane) that is hosted inside a Display.
SliceViewDefaultEventHandler	Implementation of an input event handler providing standard mouse, touch, and keyboard interaction with a SliceView.
SliceView	A 2D MPR View.
VolumeView	A Volumetric 3D View.
ViewList	Wrapper of a C++ array of Views.
DisplayOptions2d	Configures the display options for 2D slice rendering of images.
DisplayOptions3d	Configures the display options for 3D volume rendering of images.
DisplayAutoLayouter	This class facilitates the layouting of Views inside a Display by encapsulating logic to generate layouts for dynamic view configurations based on a customizable set of layouting algorithms.
RadiologyViewGroup	Class representing a set of views typically available in radiology workstations.
RadiologyViewOverlays	Helper class to create and manage ViewOverlays commonly shown in radiology workstations.
Display	Class representing the main render area.
SliceIndicator	Interactive renderer to show and manipulate the position/extent of SliceView instances in context of other Views.
StringList	Base interface for JS handles that refer to underlying C++ objects.
Graph	Data representing a (potentially directed) graph.
GraphDisplayOptions	GraphDisplayOptions provides an object for configuring the rendering of the corresponding Graph in the different views.
AlignedBox	Class representing an axis aligned rectangular cuboid in 3D space.
GlViewState	Encapsulates the OpenGL view state defined by the viewport, a projection matrix and a model-view matrix.
GlObject	Abstract base class for a renderable OpenGL object that can be hosted in a GlView.
MenuItemList	Wrapper of a C++ array of MenuItems.
Menu	Represents a hierarchical menu of actions used to describe menu bars, context menus, or popup menus.
MenuItem	A menu item is either an action, a separator, or a recursive submenu.
MenuAction	Represents an item inside a Menu where a callback function is called when user clicks on it.
MenuSeparator	Base interface for JS handles that refer to underlying C++ objects.
Mesh	Subclass of Data that represents a surface mesh.
MeshDisplayOptions	MeshDisplayOptions provides an object for configuring the rendering/appearance of the corresponding Mesh in the different views.
ExamplePropertiesUI	Base interface for JS handles that refer to underlying C++ objects.
TransferFunction	1D transfer function for classification during rendering.
EmbindModule	-

Functions

Function	Description
preloadWasm	Fetch and compile the SDK's WebAssembly module ahead of init.
init	Initialize the ImFusion Web SDK.
prefetch	Prefetch and cache data from a URL. A later call to imf.loadFileFromUrl() with the same URL will use the cached bytes or take ownership of the fetch if still in flight.
clearPrefetch	Abort any in-flight fetch for this URL and remove the fetched data.

Type Aliases

Type Alias	Description
ProgressCallback	Callback called on download progress.
EmbindString	-
AlgorithmStatusConstant	Algorithm Status
EasingCurve	Easing curve for animations
AnnotationType	Enumeration of available annotation types.
AnnotationEvent	Enumeration of annotation lifecycle events.
CameraMode	Intrinsic projection mode of a Camera.
DataKind	Kinds of data.
DataModality	Image modalities of data.
PixelType	Pixel/voxel data type
ImageDescriptorComparison	Bitflag enumeration to be used with ImageDescriptor::isApprox() to select which aspects of the descriptor should be compared.
ImageDescriptorWorldComparison	Bitflag enumeration to be used with isApprox() to select which aspects of the descriptor should be compared.
ImageInfoPatientSex	Gender of the patient
ImageInfoLaterality	Laterality of (paired) body part examined
ImageInfoAnatomicalOrientationType	DICOM Anatomical Orientation Type
FileFormat	Supported file formats.
RenderMode	Enumeration of built-in render modes for the VolumeView.
VolumeViewResetOption	Options for VolumeView.reset.
SliceBlendingMode	Enumeration of the blending modes available for rendering multiple images.
SliceInterpolationMode	Interpolation mode during rendering
SliceViewAction	Enumeration of actions that can be performed based on input events.
LongPressDetectionConfig	Configuration variables for detection of long presses
DisplayLayoutMode	Enumeration of available layouting modes for DisplayAutoLayouter#setLayoutMode.
OverlayType	Enumeration to select default overlays to add to a view.
OrientationMeshType	Enumeration of available meshes to show in the OrientationOverlay
GraphDimension	Spatial dimensionality of a Graph.
GraphType	The type of a Graph.
GlViewport	Structure describing an OpenGL viewport
EventResult	Simple record that is returned by the input event handling mechanism of Display to indicate how to proceed.
MeshVertexNormalWeighting	Weighting schemes for averaging normals of faces around a vertex to obtain vertex normals
GraphEdge	An edge in a Graph.
vec2	-
vec2f	-
vec2i	-
vec3	-
GraphNode	A node in a Graph.
vec3f	-
vec3i	-
vec4	-
LabelConfig	Object holding the metadata of a label value.
vec4f	-
vec4i	-
mat4	4x4 matrix in row-major storage order. I.e. `mat[1]` corresponds to `row = 0, col = 1`, and `mat[4]` corresponds to `row = 1, col = 0`
ViewBorderConfig	The ViewBorderConfig object defines if and how to render a border frame surrounding a View
TransferFunctionKeyPoint	Describes a single key point of a TransferFunction tissue.
TransferFunctionMode	Representation used by a TransferFunction.
MainModule	-

Classes

Class	Description
ErrnoError	-
FSStream	-
FSNode	-

Namespaces

Namespace	Description
RuntimeExports	-

@imfusion/sdk

On this page