Stack Tools

An image stack is collection of one or more images that are closely related.

The best example of this is a CT or MRI series. A stack can include all images in a series or a subset of them. A stack can even include images from different series in different studies. When changing images in a stack, Cornerstone will apply the existing viewport settings to the new image as well as any stack specific tool data. This would allow a user to zoom in on an image in a stack and then cine to subsequent images and stay zoomed in.

Creating a stack

A Stack in Cornerstone is defined as an object with the following properties:

Property	Type	Meaning
imageIds	Array	Array of Cornerstone imageIds
currentImageIdIndex	Number	Current index in the stack. This can be used to retrieve which slice the user is currently viewing.
Options	Stack Options (optional)	Options for the current Stack

Stack Options

The list of available stack options are:

Property	Type	Meaning
opacity	Number (optional, default: 1)	The global alpha-level opacity of the images in the Stack. When set, this will change the display of the current stack.
visible	Boolean (optional, default: true)	Whether or not the current stack should be visible when displayed in a composite set of images
name	String (optional)	The name of the current stack, to be used when creating a new Cornerstone Layer for displaying this stack.
viewport	Viewport (optional)	Initial viewport settings for the current stack when displayed in a composite set of imageIds

Usage

// Define an array of Image IDs
const imageIds = [
    'example://1',
    'example://2',
    'example://3'
];

// Define the Stack object
const stack = {
    currentImageIdIndex : 0,
    imageIds: imageIds
};

// Enable the DOM Element for use with Cornerstone
cornerstone.enable(element);

// Load the first image in the stack
cornerstone.loadImage(imageIds[0]).then(function(image) {
    // Display the first image
    cornerstone.displayImage(element, image);

    // Add the stack tool state to the enabled element
    cornerstoneTools.addStackStateManager(element, ['stack']);
    cornerstoneTools.addToolState(element, 'stack', stack);
});