Skip to content
Chris Hafey edited this page Apr 16, 2014 · 15 revisions

In cornerstone, an enabled element is an HTML DOM node (typically a DIV) which cornerstone displays an interactive medical image inside of. To display an image, a web developer needs to do the following:

  1. Reference the cornerstore javascript file in the web page
  2. Reference one or more image loaders that cornerstone will use to actually load the pixel data (e.g. WADO, WADO-RS, custom)
  3. Add an element to the DOM that will be used to display the image inside of
  4. Use CSS to position the element on the page along with the desired width and height
  5. Instruct cornerstone to display an interactive image in the element for an ImageId by calling the enable() api

Building on this, a web developer could optionally do the following:

  1. Specify Viewport parameters such as window width/window center, zoom and pan. The viewport can be specified when initially calling enable() or at a later time by calling setViewport api call
  2. Listen for the CornerstoneImageRendered eventso it can draw on the image (e.g. annotations)
  3. Listen to the CornerstoneViewportUpdated eventevent so it can be aware of changes to the images Viewport properties
  4. Implement a custom ImageLoader that can retrieve images stored in a non standard container or via a non standard protocol

You may also want to include the Cornerstone Tools Library for ready to go tools such as ww/wc, pan, zoom and measurements.

Clone this wiki locally