Skip to main content

Render Stack of Images

In this tutorial, you will learn how to render a stack of images.

Preface​

In order to render a set of images we need:

  • an element (HTMLDivElement) to use as the container for the viewport
  • the path to the images (imageIds).

Implementation​

We have already stored images on a server for the purpose of this tutorial.

First let's create an HTML element and style it to look like a viewport.

const content = document.getElementById('content');
const element = document.createElement('div');

element.style.width = '500px';
element.style.height = '500px';

content.appendChild(element);

Next, we need a renderingEngine and a viewport to render the images.

const renderingEngineId = 'myRenderingEngine';
const renderingEngine = new RenderingEngine(renderingEngineId);

We can then create a viewport inside the renderingEngine by using the enableElement API. Note that since we don't want to render a volume for the purpose of this tutorial, we specify the type of the viewport to be Stack.

const viewportId = 'CT_AXIAL_STACK';

const viewportInput = {
  viewportId,
  element,
  type: ViewportType.STACK,
};

renderingEngine.enableElement(viewportInput);

RenderingEngine will handle creation of the viewports, and we can get the viewport object and set the images on it, and choose the index of the image to be displayed.

const viewport = renderingEngine.getViewport(viewportId);

viewport.setStack(imageIds, 60);

viewport.render();
Tip

Since imageIds is an arrays of imageId, we can set which one to be displayed using the second argument of setStack.

Final code​

// Get Cornerstone imageIds and fetch metadata into RAM
const imageIds = await createImageIdsAndCacheMetaData({
  StudyInstanceUID:
    '1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463',
  SeriesInstanceUID:
    '1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561',
  wadoRsRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
});

// Final code
const content = document.getElementById('content');
const element = document.createElement('div');
element.style.width = '500px';
element.style.height = '500px';

content.appendChild(element);

const renderingEngineId = 'myRenderingEngine';
const viewportId = 'CT_AXIAL_STACK';
const renderingEngine = new RenderingEngine(renderingEngineId);

const viewportInput = {
  viewportId,
  element,
  type: ViewportType.STACK,
};

renderingEngine.enableElement(viewportInput);

const viewport = renderingEngine.getViewport(viewportInput.viewportId);

viewport.setStack(imageIds, 60);

viewport.render();

You should see the following:

Read more​

Learn more about:

For advanced usage of Stack Viewport, please visit StackViewport API example page.

Tip
  • Visit Examples page to see how to run the examples locally.
  • Check how to debug examples in the Debugging section.