How to create an itk.js Image object?

Hello @Mason,

Welcome to ITK!

A first step is to run your ITK C++ executable or Python script, then save the result in one of ITK’s supported file formats. MetaImage (.mha) or NRRD (.nrrd) are preferred because they support 2D, 3D, multiple pixel types, multiple pixel components, and they preserve image metadata. Then, serve the file on a web server, and create a link with the itk-vtk-viewer like this:

https://kitware.github.io/itk-vtk-viewer/app/?fileToLoad=https://data.kitware.com/api/v1/file/564a65d58d777f7522dbfb61/download/data.nrrd

To do more:

Since itk.js is an ITK External Module in addition to a NPM package, you can build an use it locally in your C++ application. After building it locally, use the provided itk::JSONImageIO class to write and read the JavaScript itk/Image data structure to a JSON file and a binary file that contains the pixel buffer data.

Build it with commands like:

git clone https://github.com/InsightSoftwareConsortium/itk-js.git
git clone https://github.com/Tencent/rapidjson.git
mkdir itk-js-build
cd itk-js-build
cmake -DITK_DIR=/path/to/your/ITK-build -DRapidJSON_INCLUDE_DIR=$PWD/../rapidjson/include ../itk-js/
make

In your program that uses ITK, require that the itk.js BridgeJavaScript module is available and its libraries linked into your program. In your CMakeLists.txt, call

find_package(ITK REQUIRED COMPONENTS BridgeJavaScript <other-components>)

where <other-components> are the output of running the ITK/Utilities/Maintenance/WhatModulesITK.py script on your source code.

Specify a filename that ends in .json to itk::ImageFileWriter, and it will produce a JSON file with the itk/Image structure and binary file for the pixel buffer data.

On the JavaScript side, libraries like axios make AJAX requests easier. Set the responseType to json or arraybuffer for the .json and binary files.

Then, create awesome things with essential tools like itk.js, vtk.js, itk-vtk-image-viewer, or paraview-glance.

2 Likes