CornerstoneJS - Viewport Example

cornerstonejs-viewport-example.markdown

CornerstoneJS - Viewport Example

The viewport parameters for an enabled element can be set using the setViewport() function. In this demo, you can test the various viewport parameters and view their effect on the rendered image.

A Pen by Erik Ziegler on CodePen.

License.

index.html

<!-- Scripts -->

<!-- Cornerstone Latest -->
<script src="https://unpkg.com/cornerstone-core"></script>

<script src="https://rawgit.com/cornerstonejs/cornerstone/master/example/exampleImageIdLoader.js"></script>


 <!-- WRAPPER -->
<div class="image-canvas-wrapper">
  <div id="element" class="cornerstone-element"></div>
</div>

script.js

var exampleImageId = 'example://1';
var element = document.getElementById('element');

// Injects cornerstone "enabled" canvas into DOM
cornerstone.enable(element);

// Load & Display
cornerstone.loadImage(exampleImageId).then(function (image) {
  // Now that we've "loaded" the image, we can display it on
  // our Cornerstone enabled element of choice
  cornerstone.displayImage(element, image);
  
  // We can now set some viewport parameters
  // and use them to update the element
  var viewport = {
    invert: false,
    pixelReplication: false,
    voi: {
      windowWidth: 400,
      windowCenter: 200
    },
    scale: 1.4,
    translation: {
      x: 0,
      y: 0
    },
    //colormap: 'hot'
  };
  
  cornerstone.setViewport(element, viewport);
  cornerstone.updateImage(element);
});

style.css

.image-canvas-wrapper {
  width: 512px;
  height: 325px;
  margin: 35px auto;
  background: black;
}

.cornerstone-element {
  width: 100%;
  height: 100%;
}

body {
  background: white;
}