Cornerstone Tool v3 - Simplest example, using Web Image Loader

Cornerstone Tools v3 - Hello World

<!DOCTYPE html>
<html>
<head>
  <title>My first Cornerstone Tools app</title>
  <!-- Dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
  <script src="https://cdn.jsdelivr.net/npm/cornerstone-math@0.1.6/dist/cornerstoneMath.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cornerstone-core@2.2.6/dist/cornerstone.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cornerstone-web-image-loader@2.1.0/dist/cornerstoneWebImageLoader.js"></script>

  <!-- development version, includes helpful console warnings -->
  <script src="https://cdn.jsdelivr.net/npm/cornerstone-tools@3.0.0-b.717/dist/cornerstoneTools.js"></script>

  <style>
    .cornerstone-element-wrapper,
    .cornerstone-element {
      width: 512px;
      height: 512px;
      margin: 0 auto;
    }
  </style>
</head>
<body>

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

  <script>
    // Register the web image loader (JPEG & PNG)
    cornerstoneWebImageLoader.external.cornerstone = window.cornerstone;
    cornerstone.registerImageLoader('http', cornerstoneWebImageLoader.loadImage);
    cornerstone.registerImageLoader('https', cornerstoneWebImageLoader.loadImage);

    // Initialize cornerstone tools, and create an "enabled element"
    // RE: An element that contains our canvas/viewport
    const csTools = cornerstoneTools.init();
    const element = document.querySelector('.cornerstone-element');
    cornerstone.enable(element);

    // Display our image on the "enabled element"
    const imageId =
      'https://www.asteris.biz/Keystone/ImageDownload.aspx?ClinicCode=TESTKEYSTONE&ImageId=01b1755e-33d1-4b24-b9af-a4a019689d5f&ImageType=PreviewImage&FrameIndex=0';
    cornerstone.loadImage(imageId).then(function (image) {
      cornerstone.displayImage(element, image);
    });
  </script>
</body>
</html>

@dannyrb Has this syntax changed for the 4.9 version of the tools? I know that the web image loader is its own thing, but I just want to make sure.

This is using a beta version of v3. It has changed slightly, and the setup is different if you're using the wado image loader.

@DannRB do you have a link to a more updated example? And yes, I'm using the wado loader as well. I'm building an image viewer application for viewing static images and dicoms and being able to move them around and use all the tools.

Here is a simple code sandbox that uses up-to-date version of cornerstone-tools and the WADO image loader:

https://codesandbox.io/s/cstools411-eu7wt

Thank you

@dannyrb The image loader is the same as the v3 example then? Only the wado image loader changed?

I don't believe the WebImageLoader has changed much / at all. It's a bit easier to setup, so I tend to use the WADO Image Loader in examples as it tends to trip people up more frequently. It's also almost always preferable to use the WADO Image Loader.

Makes sense. Thank you