CornerstoneToolsSwitchImages.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>影像切换</title>
  <script src="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js"></script>
  <script src="https://unpkg.com/cornerstone-tools@6.0.8/dist/cornerstoneTools.js"></script>
  <script
    src="https://unpkg.com/cornerstone-wado-image-loader@4.1.5/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
  <script src="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.js"></script>
  <script src="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js"></script>
  <style>
    .container {
      width: 100%;
      height: 100%;
      user-select: none;
    }

    .container #enabledElement {
      width: 500px;
      height: 500px;
      margin-bottom: 10px;
    }

    .container #operation button {
      margin-right: 5px;
      font-size: 16px;
    }

    .container #operation input {
      width: 40px;
      padding: 3px 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="enabledElement"></div>
    <div id="operation">
      <button id="prev">向前</button>
      <button id="next">向后</button>
      <button id="jump">跳转至</button>
      第 <input id="index" type="number"> 张
    </div>
  </div>
  <script>
    cornerstoneTools.init({
      touchEnabled: false,
      showSVGCursors: true
    });
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;

    cornerstoneWADOImageLoader.webWorkerManager.initialize({
      maxWebWorkers: navigator.hardwareConcurrency || 1,
      startWebWorkersOnDemand: true,
      taskConfiguration: {
        decodeTask: {
          initializeCodecsOnStartup: false
        }
      },
      webWorkerTaskPaths: [
        "https://unpkg.com/cornerstone-wado-image-loader@4.1.5/dist/610.bundle.min.worker.js",
      ]
    });
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

    const element = document.getElementById("enabledElement");

    cornerstone.enable(element);

    const StackScrollTool = cornerstoneTools.StackScrollTool;
    const StackScrollMouseWheelTool = cornerstoneTools.StackScrollMouseWheelTool;

    const imageIds = [];

    for (let i = 1; i < 36; i++) {
      imageIds.push("dicomweb:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/" + i + ".dcm");
    }

    const stack = {
      currentImageIdIndex: 0,
      imageIds: imageIds
    };

    cornerstone.loadImage(imageIds[0]).then((image) => {
      cornerstone.displayImage(element, image);
      cornerstoneTools.addStackStateManager(element, ['stack']);
      cornerstoneTools.addToolState(element, 'stack', stack);
      cornerstoneTools.addTool(StackScrollTool, {
        configuration: {
          loop: true,
          allowSkipping: true
        }
      });
      cornerstoneTools.addTool(StackScrollMouseWheelTool, {
        configuration: {
          loop: true,
          allowSkipping: true,
          invert: false
        }
      });
      cornerstoneTools.setToolActive('StackScroll', { mouseButtonMask: 1 });
      cornerstoneTools.setToolActive("StackScrollMouseWheel", { mouseButtonMask: 4 });
    });

    const prevButton = document.getElementById("prev");
    const nextButton = document.getElementById("next");
    const jumpButton = document.getElementById("jump");
    const input = document.getElementById("index");
    const scroll = cornerstoneTools.importInternal("util/scroll");
    const scrollToIndex = cornerstoneTools.importInternal("util/scrollToIndex");

    prevButton.addEventListener("click", () => {
      scroll(element, -1, true, true);
    });

    nextButton.addEventListener("click", () => {
      scroll(element, 1, true, true);
    });

    jumpButton.addEventListener("click", () => {
      let newImageIdIndex = input.value;

      if (newImageIdIndex < 0) {
        newImageIdIndex = 0;
        input.value = 0;
      } else if (newImageIdIndex > 34) {
        newImageIdIndex = 34;
        input.value = 34;
      }

      console.log(newImageIdIndex);

      scrollToIndex(element, newImageIdIndex);
    })
  </script>
</body>

</html>