Provide basic DICOM metadata in a convenient API.

Internally, this function could use dcm.js or daikon, for example.

Hello,
I'm having troubles running readImageLocalDICOMFileSeries in a Electron+Webpack context. The functions works if I call it just with node but it get stuck when running in electron (webpack/babel).
If I pause the execution in the debugger I get this big callstack (./node_modules/babylon/lib/index.js)

Is babel causing the troubles ? I don't know how to fix that.

thank you

André

Hello,

I am currently trying to convert my original c++(with itk and vtk)-based stand-alone application into

web application.

This is a demo video of what I am doing ( https://www.youtube.com/watch?v=8ZIxNuMIj9g )

I fill there are some limitations when importing DICOM files in web browser compared to using c++ ITK.

Especailly, I do not know how to read DICOM tag information using ITK.js, that is possible by using itk::Metadata thigns in C++. I am trying to use EMSCripten pipeline module, but it is hard for me to find out how to pass *.dcm files to the pipeline module.
Maybe it would be possible to pass argument using IOTypes.Binary? Can you give me some example code that passes original dicom file to the C++ module?

Thank you.

I use ITK Readers for loading MRI images (nii, mnc, vtk etc.) . In order to not re-invent the wheel I am using Reader Factory approach based on VTK and ParaView Glance. I have noticed that resources (probably of workers) are not released on the ITK side. This happens when I want to read a given resource (file or url) twice in the same browser session. I thought that maybe this is only case of my application, but I have checked in ParaView and got the same result. I made the following experiment in PV:

• loaded nrrd file (about 500KB)
• loaded vtk file (about 800KB)
• again the same nrrd.

Every time I had exceptions (sometimes different).

In case of my application I have binding error related to unknown emsc parameter (see below). How can i solve this problem? I want to give to the user possibility to load the same image as many times as he wants during session with browser without refreshing page. Should I terminate workers, clear readimagearraybuffer, and if so, how can I do it?

Hi,
Great project. I would like to use itk.js with my create-react-app project.

I am having problems configuring the react-scripts webpack.config.js to get things working.

Would it be possible to also add an example that works when using create-react-app ?

This would be huge !

Thanks so much,
Lorenz

Add streaming support to itk::JSONImageIO to help support processing very large images in wasm.

The itk::StreamingImageIOBase streaming should be implemented as described here.

Just updated to itk 7.2.0, and tried to open datasets that I was able to read with 7.1.0. Tried with DICOM series and NRRD files.

I get the following error message every time I try to load:

Uncaught TypeError: Invalid attempt to destructure non-iterable instance
    at Worker._onEvent
    at Worker._onMessage

Could reproduce with https://data.kitware.com/#item/59df612e8d777f31ac641e37

Hello,
I try to adapt BinShrink example to write the ShrinkImage on the hard drive (using writeImageLocalFile).

If I just load the image and write it, I don t have any problem.
If I load the image, runPipelineNode with hello.cxx (the code from the sample) and then try to write the outputs on the disk. I have nothing written.... is there a bug or am I doing something wrong ?

Thanks a lot

Here are the sources used

index.js

const path = require('path')
const runPipelineNode = require('itk/runPipelineNode.js')

const readImageLocalFile = require('itk/readImageLocalFile.js')
const writeImageLocalFile = require('itk/writeImageLocalFile.js')

const IOTypes = require('itk/IOTypes.js')

const pipelinePath = path.resolve(__dirname, 'web-build', 'hello' )

const testInputFilePath = path.resolve(__dirname, 'cthead1.png')
const testOutputFilePath = path.resolve(__dirname, 'cthead1Shrink.png')

/* * /
// Working piece of code
readImageLocalFile(testInputFilePath)
.then(function (image) {
const useCompression = false
return writeImageLocalFile(useCompression, image, testOutputFilePath)
})
/* */
// Piece of code not with bug
readImageLocalFile(testInputFilePath)
.then(function (image) {
const args = ['cthead1.png.json', 'cthead1Shrink.png.json', '4']
const desiredOutputs = [
{ path: args[1], type: IOTypes.Image }
]
const inputs = [
{ path: args[0], type: IOTypes.Image, data: image }
]

  return runPipelineNode(pipelinePath, args, desiredOutputs, inputs)
}).then(function ({stdout, stderr, outputs}) {

    const useCompression = false
    return writeImageLocalFile(useCompression, outputs[0].data, testOutputFilePath)
}).then(function () {
    console.log("DEBUG - Script runned - Output written on disk")
})

/* */

hello.cxx

#include

#include "itkImageFileReader.h"
#include "itkImageFileWriter.h"

#include "itkBinShrinkImageFilter.h"

int main( int argc, char *argv[] ) {

// Test from website
if( argc < 4 )
{
std::cerr << "Usage: " << argv[0] << " " << std::endl;
return EXIT_FAILURE;
}

std::cout << "Inside js coming from cxx" << std::endl;

const char * inputImageFile = argv[1];
const char * outputImageFile = argv[2];
unsigned int shrinkFactor = atoi( argv[3] );

using PixelType = unsigned char;
constexpr unsigned int Dimension = 2;
using ImageType = itk::Image< PixelType, Dimension >;

using ReaderType = itk::ImageFileReader< ImageType >;
auto reader = ReaderType::New();
reader->SetFileName( inputImageFile );

using ShrinkFilterType = itk::BinShrinkImageFilter< ImageType, ImageType >;
auto shrinker = ShrinkFilterType::New();
shrinker->SetInput( reader->GetOutput() );
shrinker->SetShrinkFactors( shrinkFactor );

using WriterType = itk::ImageFileWriter< ImageType >;
auto writer = WriterType::New();
writer->SetInput( shrinker->GetOutput() );
writer->SetFileName( outputImageFile );

try
{
writer->Update();
}
catch( itk::ExceptionObject & error )
{
std::cerr << "Error: " << error << std::endl;
return EXIT_FAILURE;
}

return EXIT_SUCCESS;

}

CMakeLists.txt

cmake_minimum_required(VERSION 3.10)
project(HelloWorld)

FIND_PACKAGE ( ITK )

IF ( ITK_FOUND )
INCLUDE( ${ITK_USE_FILE} )
ELSE (ITK_FOUND)
MESSAGE (FATAL ERROR
"itk not found. Il est ou?")
ENDIF( ITK_FOUND )

set(io_components ITKImageIO)
if(EMSCRIPTEN)
set(io_components BridgeJavaScript)
endif()
find_package(ITK REQUIRED
COMPONENTS ${io_components}
ITKImageGrid
)
include(${ITK_USE_FILE})

if(EMSCRIPTEN)
include(ITKBridgeJavaScript)
web_add_executable(hello hello.cxx)
web_target_link_libraries(hello ${ITK_LIBRARIES})
else()
add_executable(hello hello.cxx)
target_link_libraries(hello ${ITK_LIBRARIES})
endif()

Clarify when a Promise is returned, the object and its properties.

• System Info *
  Window 10, Node v10.15.1, NPM v6.8.0

I am trying to build "WriteVTKPolyDataPipeline/" project,

When I execute npx itk-js build . ,

it says

` Could not find a package configuration file provided by "VTK" with any of
the following names:

VTKConfig.cmake
vtk-config.cmake

`

There was no problem when I use ITK library in my project, and in ITK project, if I check CMakeCache.txt file, it shows

VTK_DIR:PATH=/VTK-build.

if I add find_package(VTK REQUIRED) it results the error.

is it possible to set vtkPolyData as worker input?

I am trying to make a webworker for mesh processing that gets vtkPolyData as an input and vtkPolyData as an output.

        const args = ['thread.json', 'thread.json']
        const outputType = [
            {path : args[1], type : IOTypes.vtkPolyData},
        ];

        const inputs = [
            {path : args[0], type : IOTypes.vtkPolyData, data : this.selectedPolyData}
        ]


        
        const result = await runPipelineBrowser(null, 'meshProcessor', args, outputType, inputs);
        result.webWorker.terminate();

and it results error as below.

is it becasue of input type vtkPolyData?

A high level API to identify distinct series in a list of DICOM files. The series can then be passed to itk/readImageLocalDICOMFileSeries or metadata investigated with the function provided by #250 .

Hello!

First off, thanks for the awesome work on this project.

One issue I had while starting off is that none of the examples seem to include web_target_link_libraries anywhere, so it was not immediately clear what I needed to do to set up a proper CMakeLists.txt. I ended up adding target_link_libraries in the wrong place until eventually finding the answer in one of the tests: https://github.com/InsightSoftwareConsortium/itk-js/blob/1fe62d437549e057de42b98fa70706cc96ec1d13/test/MedianFilterPipeline/CMakeLists.txt#L14-L21

I realize that this may be because I am not a C++ expert, but this feels like a missing piece in the documentation.

Would you accept a PR to add something like NodeHelloInsight, which would be essentially the same as NodeHelloWorld, but include itkImage.h. Basically just showing how to cross-compile this: https://itk.org/Wiki/ITK/HelloInsight

Here is what I was thinking: master...swederik:node-hello-insight

I can add a docs page if you want and send a PR. Alternatively, we could change NodeHelloWorld instead.

Thanks!

Recently, functions were added to the API to support reading and writing images or meshes, e.g. readLocalFileSync, readFile. Use these in the examples instead of Image-specific functions to support both reading both images and meshes.

Hi, is it possible to import itk-js as a script tag in HTML file? I am doing a project which is visualization 3D object from a set 2D DICOM with 3 different rendering algorithms. Other 2 methods are now imported by using script tags in my HTML file, so it might be easier for me to integrate VTK and ITK into the project. The reason is that after Webpack minify the original JS file into bundle file, I cannot interact my current code with the function I wrote in the bundle file. Hope to reiceve respond from you soon. Thanks again. @thewtex

With Azure Pipelines

I tried to use ITK Readers in VTK to read NIFTI images but I could not display them properly (I checked a few examples and none of them was displayed properly). So I tried to read these NIFTI with ParaView Glance and the result was the same as bad. So I checked these NIFTI in other viewers (ITK-Snap, 3D Slicer) and they were displayed properly.

Moreover, I converted this NIFTI file: https://nifti.nimh.nih.gov/nifti-1/data/avg152T1_LR_nifti.nii.gz to a few other formats using 3D slicer and then displayed results in ParaView:

1. mnc - NOT DISPLAYING PROPERLY
2. nrrd - OK
3. vtk - NOT DISPLAYING PROPERLY
4. mgz - OK

The most stunning for me is that when I try to read original NIFTI file it is not working, but after conversion to nrrd or mgz, it is displayed properly. I compared the meta-data in headers and values in data tables (get by getOutputData(), getPointData().getScalars().getData(), getExtent(), getRange() and so on) among all the above formats using Inspector Debugger. It seems that headers are identical, for all the cases, but the raw data tables are different in case of mnc, nifti and vtk (the remaining ones are identical and displayed properly).
The images displayed improperly looked as they were shrinked onto one direction (projected on a single plane)

I am attaching examples of nifti files from public dbs
Landman_3253_20110818_366806254_301_WIP_MPRAGE_SENSE_MPRAGE_SENSE.nii.gz
avg152T1_LR_nifti.nii.gz

The examples are from: https://www.nitrc.org/projects/multimodal
.

Thanks to your help, I have become more comfortable with the use of vtk and itk.

Now I want to use itk.js with vtk.js. However, there seems to be few examples of this.

Do you plan to create or release examples of itk.js?

Thank you!!

Image metadata is correct, but the pixel buffer is not.

CC: @HastingsGreer

Hello

I made a simple webworker pipeline using itk.js

it works fine mostly, but results chrome out-of-memory crash when trying to process

large data.

I tried to apply itk::ThresholdImageFilter on

512 x 512 x 210 sized image.
Image type is int16_t.

below is cxx pipeline code :

//Define ITK Image Type
using PixelType = int16_t;
constexpr unsigned int Dimension = 3;
using ImageType = itk::Image<PixelType, Dimension>;


//Get Input
using ReaderType = itk::ImageFileReader<ImageType>;
auto reader = ReaderType::New();
reader->SetFileName(argv[1]);


int upper = 2000;

itk::ThresholdImageFilter<ImageType>::Pointer upperThresholdFilter = itk::ThresholdImageFilter<ImageType>::New();
upperThresholdFilter->SetInput(reader->GetOutput());
upperThresholdFilter->ThresholdAbove(upper);
upperThresholdFilter->SetOutsideValue(upper);
//upperThresholdFilter->Update();


//itkImage = upperThresholdFilter->GetOutput();


using WriterType = itk::ImageFileWriter<ImageType>;
auto writer = WriterType::New();
writer->SetInput(upperThresholdFilter->GetOutput());
writer->SetFileName(argv[2]);



try{
    writer->Update();
}catch(itk::ExceptionObject & error){
    std::cerr << "Error " << error << std::endl;
    return EXIT_FAILURE;
}


return EXIT_SUCCESS;

}

`

I do not know much about webWorker or other web things.

Chrome develop console seems like it catches potential memory error when the worker tries to execute write() function in pipeline thread

I am using the latest stable version of chrome browser. My desktop memory is 128GB.

Is this something that I can fix in code-level?

Thank you

@jourdain we will need a vtkJSONDataSetReader for this.

Hello,
I was trying to have images saved to a temporary directory in Paraview Glance, which is based on vue.js

when I call the function readImageLocalFile or writeImageLocalFile I get the error Error: Cannot find module '/ImageIOs/itkMetaImageIOJSBinding'

Is there a way I can solve this?

Print a nice error message if it is not.

Test on macOS.

Hi, I am using ITK.js to read input DICOM slices. The main reason why I am using ITK is itkImage contains some useful information of slice for my next visualizing steps, such as origin, spacing, etc., instead of using other JavaScript libaries to get these tags, so it's kind of time-consuming. Is it possible to convert itkImage to original canvas imageData after taking all the necessary tags into an array? Since I need the original imageData for my next steps.

Hi,
I wanted to compile my first C code in itk.js following your example from https://insightsoftwareconsortium.github.io/itk-js/examples/hello_world_node.html.

I was able to succeed in Mac, but when I tried to build it in Windows, the whole building process from npx itk-js build . was ending just after creating itk-js-build-env script in /web-build folder. I attached Chrome inspector to node and I found that there might be a problem in Node's 'child-process' package, with spawnSync (see below), which is called by itk-js-cli.
How can I fix it? BTW, I checked my environment and it seems that Docker is working properly, as well as npx and other tools.

I am quite new to itk js and webpack. I try to write a simple web app with itk/vtk. However, my webpack app always give me this log when i try to read some local images.

itk_sync:2 Uncaught (in promise) Error: Cannot find module '/ImageIOs/itkDCMTKImageIOJSBinding'
at webpackEmptyContext (itk_sync:2)
at loadEmscriptenModuleNode (loadEmscriptenModuleNode.js:2)
at eval (readImageLocalFile.js:50)
at new Promise ()
at readImageLocalFile (readImageLocalFile.js:18)
at App.componentDidMount (app.js:55)
at commitLifeCycles (react-dom.development.js:15255)
at commitAllLifeCycles (react-dom.development.js:16523)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)

In my app, i just simply call this script itkReadImageLocalFile('C:/Users/jieji/Desktop/T1propeller&MRA/T2/IMG-0001-00001.dcm');
I try to fi
I followed the example in itk, webpack and changed it a little bit in webpack.config.js.

const path = require('path');
const webpack = require('webpack');
const vtkRules = require('vtk.js/Utilities/config/dependency.js');
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
// entry
entry: path.resolve(__dirname, 'src/index.js'),
// output
output:{
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
},
module: {
rules:[
{ test: path.resolve(__dirname, 'src/index.js'), loader: 'expose-loader?index' },
// html loader
{
test: /.html$/,
use: [
{ loader: 'html-loader' }
],
include: path.resolve(__dirname, 'src')
},
// css style loader
{
test: /.css$/,
use:[
{loader: 'style-loader'},
{loader: 'css-loader'}
],
include: path.resolve(__dirname, 'src')
},
// babel-loader
{
test: /.js$/,
use:[
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
}
}
],
include: path.resolve(__dirname, 'src')
}
// vtk configure.
].concat(vtkRules.webpack.core)
},
plugins: [
// copy necessary itk modules
new CopyWebpackPlugin([
{
from: path.join(__dirname, 'node_modules', 'itk', 'WebWorkers'),
to: path.join(__dirname, 'public', 'itk', 'WebWorkers')
},
{
from: path.join(__dirname, 'node_modules', 'itk', 'ImageIOs'),
to: path.join(__dirname, 'public', 'itk', 'ImageIOs')
},
{
from: path.join(__dirname, 'node_modules', 'itk', 'MeshIOs'),
to: path.join(__dirname, 'public', 'itk', 'MeshIOs')
}
])
],
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, './src'),
],
},
performance: {
maxAssetSize: 10000000
},
// mode
mode: 'development',
// resolve: {
// module: path.resolve(__dirname, 'node_modules')
// },
devServer: {
contentBase: path.resolve(__dirname, 'public')
}
}

A string used to identify the dataset.

Similar to the vtk.js vtkPolyData support.

CC: @jourdain

hi, i want to read a dicom with data compressed as jpeg. i find the daikon.js, and use it to get uncompress dicom image, but then, how to use itk-js to read the image, because i use vtk.js too, i know vtk.js depend on itk.js to read such as image, dicom etc.

main code logic is below:

import itkreadImageDICOMFileSeries from 'itk/readImageDICOMFileSeries';
import vtkHttpDataAccessHelper from 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';

vtkHttpDataAccessHelper.fetchBinary(url).then((arrayBuffer) => {
    const image = daikon.Series.parseImage(new DataView(arrayBuffer));
    if (image === null) {
        console.error(daikon.Series.parserError);
    }

    const rawData = image.getRawData(); // ArrayBuffer

    const filename = `test.dcm`;

    const file = new File([rawData], filename);

    itkreadImageDICOMFileSeries(null, [file])
        .then(({ image: itkImage, webWorker }) => {
            // code not exec here
            // get a Error: Could not read file: /work/test.dcm
        })
})

update:

because the raw image data have got, i think i have to create a Image instance, but need a correct ImageType.

https://github.com/InsightSoftwareConsortium/itk-js/blob/f2b16ac4b9097367969dc1ff961037bc43441753/src/Image.js#L4-L23

https://github.com/InsightSoftwareConsortium/itk-js/blob/f2b16ac4b9097367969dc1ff961037bc43441753/src/ImageType.js#L4-L12

but i don't know how to determine the componentType componets and other input args of constructor ImageType.

thanks for your suggestions!

Hello,
we are running itk-js with webpack

After sweating a lot, we finally manage to call readImageFile with a blob containing the image as parameter

Unfortunately, we try it with .jpg / tif / png and no one is working.
Looking at the result of the callback, we get a rejected Promise with a different reason depending on the image file type.

Digging into : itk/WebWorkers/ImageIO.worker.js
It seems the error are coming from the methods implemented in the file ...

Could you have a look at it ?

Thank you very much

PS : here is the log of the error messages with the different image file type

JPG / PNG

Promise { "rejected" }
​ : "rejected"
​ : {…}
​​ message: "e is undefined"

TIF

Promise { "rejected" }
​ : "rejected"
​ : {…}
​​ message: "Could not read file: /work/"

Enabling building modules with multi-threading support and using these modules on clients that support it.

Hi,

When I try to install itk through node & webpack, this is failing. The folder created is strange, it contains every module on the root, no package.json, no build file, nothing usefull.

In unpkg.com itself an error is displayed (https://unpkg.com/[email protected]/dist/itk.js)
Cannot find "/dist/itk.js" in [email protected]

Is it the normal behaviour? Am I missing the whole thing?

If I have a web application with the purpose of doing image registration (ITK Algorithms) on DICOM Images, will I be able to use this library?

Adblockers (e.g. uBlock Origin) that use the EasyPrivacy list will block all wasm files fetched via xmlhttprequest.

Glance reference: Kitware/glance#62

https://github.com/stefanpenner/es6-promise

Steps:

• Make sure all patches from dcmcjs have been merged into upstream DCMTK.
• Update ITK's version of DCMTK
• Enable itkDCMTKImageIO

As I see, for now itk-js provides functionality for I/O and data structures. What could be starting point for implementing segmentation algorithm using itk-js?

Hello,

For Project Week 31 I am trying to build the PolySeg library for the web. PolySeg is used in Slicer to manage segmentations and convert between different representations (contour / ribbon / lablemap) of segmentation maps.

I've run into an issue which I believe is related to multithreading used by VTK (or perhaps ITK?). When I build I get this:

error: undefined symbol: pthread_attr_setscope

I'm posting to see if anyone has run into this issue or has any ideas on how to fix it.

Under the assumption that this is pthread in VTK, I'm trying to set CMAKE_USE_PTHREADS_INIT to False for VTK when building the dockcross image.

https://github.com/Kitware/VTK/blob/2345d908224ae8f2999f7a8783cefd32cd48f2cf/Common/Core/CMakeLists.txt#L328

I see that @thewtex has set some environment variable (ITK_GLOBAL_DEFAULT_THREADER) in the past that also deals with multithreading, so maybe this is related, or maybe there's a VTK equivalent?

https://github.com/InsightSoftwareConsortium/itk-js/pull/143/files#diff-389705e038e06cfe5a0459474146ee35R3

My in-progress PR is here: PerkLab/PolySeg#4

If I skip importing things from PolySeg and just use simple things like e.g. vtkSphereSource, everything builds and runs properly.

Quite possibly related:

https://github.com/Kitware/VTK/blob/6b559c65bb90614fb02eb6d1b9e3f0fca3fe4b0b/Common/Core/vtkConditionVariable.cxx#L25

Update: It looks like you can avoid the issue by adding -s ERROR_ON_UNDEFINED_SYMBOLS=0 to ITKBridgeJavaScript.cmake and rebuilding the docker image. I don't know yet if this actually impacts the functionality.

I get the following crash error when reading a file that is not supported by readImageFile (for example a txt or md file):

Uncaught DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope':
Error: Could not find IO for: ${fileName} could not be cloned.

See below two ways to try to gracefully handle that error:

import itkReadImageFile from 'itk/readImageFile';

itkReadImageFile(file).then(
  (image) => {
    console.log(`${file} successfuly read`);
  },
  (error) => {
    console.log(`Could not read ${file}: ${error}`);
  }
);

or

import itkReadImageFile from 'itk/readImageFile';

itkReadImageFile(file)
  .then((image) => {
    console.log(`${file} successfuly read`);
  })
  .catch((error) => {
    console.log(`Could not read ${file}: ${error}`);
  });

References:

• Using promises
• Two ways to catch issues

I implemented React application which is using ITK Readers for browsing MRI images. Everything was built in Webpack and worked perfectly as long as I was using only one element in url context path (when images where loaded). When I introduced React Router to my application and started to use longer context paths, the IO Image Workers were not visible anymore (HTTP 404 error).
The Chrome inspector was showing error in line 23 of createWebWorkerPromise.js where new window.worker(...) is created. The path to the worker contained too many elements, whilst the working one was: '{domain_url}/itk/WebWorkers/ folder,
eg.
{domain_url} itk/WebWorkers/ImageIO.worker.js
{domain_url}/itk/ImageIOs/itkNiftiImageIOJSBindingWasm.js.

I found that if I change itkConfig.js (in /node_modules), the problem is solved and workers are loaded from proper urls, i.e.

var itkConfig = {
  itkModulesPath: 'itk'   //-> if changed to  '/itk' or to absolute path, then it works for any given path
};

Is it possible to 'inject' my own itkConfig.js using Webpack? Can I replace itkConfig with webpack using similar solution to one described for Karma testing?

resolve: {
        alias: {
          './itkConfig$': path.resolve(__dirname, 'test', 'config', 'itkConfigTest.js'),
        },
      },