console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
	<div class="container">
		<h1>
			falseColorMapping/index.html
		</h1>
		<div class="row">
			<div class="col-xs-10">
				<div style="width: 512px; padding-top: 5px;">
					<canvas id="colorbar" width="512px" height="20px"></canvas>
				</div>

				<div id="dicomImage" style="width: 512px; height: 512px;" oncontextmenu="return false" onmousedown="return false"></div>
			</div>
			<div class="col-xs-2">
				<label for="colormaps"> Colormap </label>
          <select id="colormaps" style="width: 100%;">
            <option value="">Select...</option>
          </select>
        </div>
      </div>
    </div>
  </body>

  <script src="https://unpkg.com/cornerstone-core"></script>
  <script src="https://unpkg.com/cornerstone-web-image-loader"></script>
  <script src="https://unpkg.com/cornerstone-wado-image-loader"></script>
  <script src="https://rawgit.com/cornerstonejs/cornerstoneWADOImageLoader/master/examples/dicomParser.min.js"></script>
  <script>
    cornerstoneWebImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    var config = {
  maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWebWorkersOnDemand: true,
};
cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
    function fillColormapsList() {
      const dropdown = document.getElementById("colormaps");
      const colormapsList = cornerstone.colors.getColormapsList();

      const addOption = function (id, name, disabled) {
        const option = document.createElement("OPTION");
        option.value = id;
        option.textContent = id;
        option.disabled = !!disabled;
        dropdown.append(option);
      };

      colormapsList.forEach(function (colormapItem) {
        addOption(colormapItem.id, colormapItem.name);
      });

      // Horizontal Line
      addOption("", "──────────", true);

      addOption("custom", "Custom");
    }

    // image enable the dicomImage element
    const element = document.getElementById("dicomImage");
    cornerstone.enable(element);

    // const imageId =
    //   "https://rawgit.com/cornerstonejs/cornerstoneWebImageLoader/master/examples/Ultrasound.png";
    const imageId =
      "wadouri:https://raw.githubusercontent.com/cornerstonejs/cornerstoneWADOImageLoader/master/testImages/CTImage.dcm_JPEGProcess2_4TransferSyntax_1.2.840.10008.1.2.4.51.dcm";

    cornerstone.loadImage(imageId).then(function (image) {
      cornerstone.displayImage(element, image);
    });

    function colormapChanged() {
      let viewport = cornerstone.getViewport(element);
      const colormapId = document.getElementById("colormaps").value;
      console.log(viewport)

      viewport.colormap = colormapId;
      cornerstone.setViewport(element, viewport);
      cornerstone.updateImage(element, true);
    }
    document
      .getElementById("colormaps")
      .addEventListener("change", colormapChanged);

    fillColormapsList();
  </script>
</html>