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:
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 })
You can use the FreehandRoiTool function, when require adding the tool to draw points on medical images [3, 5] with ability to subsequently save the coordinates. For instance, when you want to use it for machine learning projects [1, 2]. Be aware that this might change depending on doing it for browser or mobile environments [4].
// 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 })
[1] Francisco Maria Calisto, Carlos Santiago, Nuno Nunes, and Jacinto C. Nascimento. 2022. BreastScreening-AI: Evaluating medical intelligent agents for human-AI interactions. Artificial Intelligence in Medicine 127, 102285. https://doi.org/10.1016/j.artmed.2022.102285
[2] Francisco Maria Calisto, Carlos Santiago, Nuno Nunes, and Jacinto C. Nascimento. 2021. Introduction of human-centric AI assistant to aid radiologists for multimodal breast image classification. International Journal of Human-Computer Studies 150, 102607. https://doi.org/10.1016/j.ijhcs.2021.102607
[3] Francisco Maria Calisto, Nuno Nunes, and Jacinto C. Nascimento. 2020. BreastScreening. Proceedings of the International Conference on Advanced Visual Interfaces. https://doi.org/10.1145/3399715.3399744
[4] Francisco M. Calisto, Alfredo Ferreira, Jacinto C. Nascimento, and Daniel Gonçalves. 2017. Towards Touch-Based Medical Image Diagnosis Annotation. Proceedings of the 2017 ACM International Conference on Interactive Surfaces and Spaces. https://doi.org/10.1145/3132272.3134111
[5] Francisco Maria Calisto. 2017. Medical Imaging Multimodality Breast Cancer Diagnosis User Interface. Master Thesis. https://doi.org/10.13140/RG.2.2.15187.02084