Javascript cornerstone JS error: apiTool is not a constructor

Question

I am trying the cornerstone js library. In which I am trying to use some cornerstone-tools

All I am doing using common JS.

Below is my code:

HTML

<div class="cornerstone-element-wrapper">
  <div class="cornerstone-element" data-index="0" oncontextmenu="return false"></div>
</div>

JS

// Setup image loader
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstone.registerImageLoader('http', cornerstoneWebImageLoader.loadImage)
cornerstone.registerImageLoader('https', cornerstoneWebImageLoader.loadImage)
 
// Setup tools
csTools = cornerstoneTools.init();
  
// Enable Element
const element = document.querySelector('.cornerstone-element');
cornerstone.enable(element);

// Display an image
const imageId = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg';
cornerstone.loadImage(imageId).then(function (image) {
  cornerstone.displayImage(element, image); 
 
}); 
 
// Freehand ROI 
// Add our tool, and set it's mode
const FreehandRoiTool = cornerstoneTools.FreehandRoiTool;
 
csTools.addTool(FreehandRoiTool)
csTools.setToolActive('FreehandRoi', { mouseButtonMask: 1 })

as far as I could understand docs, I don't see any error in the above code. but still, the following error is displayed in the console.

Uncaught TypeError: apiTool is not a constructor

Following is the JS fiddle of the above code:

Fiddle

Answer 1

As I have done some research, I found out that the FreehandRoiTool function is not present in the cornerstoneTools. So I solved my probelm using the function FreehandMouseTool, and it seems to be working fine now.

Here is the following code I changed.

// Setup image loader
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstone.registerImageLoader('http', cornerstoneWebImageLoader.loadImage)
cornerstone.registerImageLoader('https', cornerstoneWebImageLoader.loadImage)
 
// Setup tools
csTools = cornerstoneTools.init();
console.log(cornerstoneTools);
// Enable Element
const element = document.querySelector('.cornerstone-element');
cornerstone.enable(element);

// Display an image
const imageId = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg';
cornerstone.loadImage(imageId).then(function (image) {
  cornerstone.displayImage(element, image);  
}); 
 
// Freehand ROI 
// Add our tool, and set it's mode
const FreehandMouseTool = cornerstoneTools.FreehandMouseTool;
 
csTools.addTool(FreehandMouseTool)
csTools.setToolActive('FreehandMouse', { mouseButtonMask: 1 })
 

Answer 2

You can use the FreehandRoiTool function, when require adding the tool to draw points on medical images with ability to subsequently save the coordinates. For instance, when you want to use it for machine learning projects. Be aware that this might change depending on doing it for browser or mobile environments.

// Init cornerstone tools
cornerstoneTools.init();

// Enable any elements, and display images
// ...

// Add our tool, and set it's mode
const FreehandRoiTool = cornerstoneTools.FreehandRoiTool;

cornerstoneTools.addTool(FreehandRoiTool)
cornerstoneTools.setToolActive('FreehandRoi', { mouseButtonMask: 1 })