基石工具未加载内置工具答案

【问题标题】：Cornerstone Tools not loading built in tools基石工具未加载内置工具
【发布时间】：2021-05-28 22:56:11
【问题描述】：

不确定发生了什么，但图片加载正确，但工具不显示。在图像实际位于 Dom 中之前，我不会加载该工具（这就是底部的用途）。 console.log 中的所有模块都可以打印到控制台。任何帮助，将不胜感激。仅供参考，现在我正在使用 vs code 实时服务器运行，

html文件

    <!DOCTYPE html>
<html>
  <head>
    <script src="./wado/dicomParser.min.js"></script>
    <script src="./wado/cornerstoneWADOImageLoader.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
    <script src="https://cdn.jsdelivr.net/npm/cornerstone-math@0.1.6"></script>

    <script src="./wado/cornerstone.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cornerstone-web-image-loader@2.1.0"></script>

    <script src="https://cdn.jsdelivr.net/npm/cornerstone-tools@3.0.0-b.641/dist/cornerstoneTools.js"></script>
  </head>
  <body>
    <input type="file" id="fileInput" multiple />

    <div style="width: 512px; height: 512px" id="image"></div>
    <button id="addTools">Add Tool</button>

    <script src="main.js"></script>
  </body>
</html>

Javascript

    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;

cornerstone.registerImageLoader("wadouri", loadAndViewImage);

const csTools = cornerstoneTools.init();
const LengthTool = cornerstoneTools.LengthTool;

console.log("cornerstone", cornerstone);
console.log("loader", cornerstoneWADOImageLoader);
console.log("tools", cornerstoneTools);
console.log("cstools", csTools);
console.log("math", cornerstoneMath);
console.log("hammer", Hammer);

const imageHolder = document.getElementById("image");
cornerstone.enable(imageHolder);

const toolButton = document.getElementById("addTools");

toolButton.addEventListener("click", (e) => {
  loadTool();
});

fileInput.addEventListener("change", (e) => {
  const file = fileInput.files;
  const ima = file[0];

  const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(ima);

  loadAndViewImage(imageId);
});

function loadAndViewImage(imageId) {
  cornerstone
    .loadImage(imageId)
    .then((image) => {
      const viewport = {
        invert: false,
        pixelReplication: false,
        // voi: {
        //   windowWidth: 256,
        //   windowCenter: 256,
        // },
        scale: 1.5,
        translation: {
          x: 0,
          y: 0,
        },
      };
      cornerstone.displayImage(imageHolder, image, viewport);
      console.log(image);
      console.log(image.data.uint16("x00280010"));
      console.log(image.data.uint32("x00020000"));
    })
    .catch((e) => console.log(e));
}

function loadTool() {
  csTools.addTool(LengthTool);
  csTools.setToolActive(LengthTool.name, {
    mouseButtonMask: 1,
  });
  console.log(csTools.store.state);
}

【问题讨论】：

标签： cornerstonejs

【解决方案1】：

我在这里回答我自己的问题，我切换到导入并重新编写了一些代码。到目前为止，以下似乎工作正常。

    import Hammer from "hammerjs";
import dicomParser from "dicom-parser";
import * as cornerstone from "cornerstone-core";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
// import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";

import * as cornerstoneTools from "cornerstone-tools";

_initCornerstone();

cornerstone.registerImageLoader("wadouri", loadAndViewImage);

const imageHolder = document.getElementById("image");

const toolButton = document.getElementById("addTools");
const windowing = document.getElementById("changeWindow");
const fileInput = document.getElementById("fileInput");
const newWidth = document.getElementById("width");
const newCenter = document.getElementById("center");

fileInput.addEventListener("change", (e) => {
  const file = fileInput.files;
  const ima = file[0];

  const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(ima);
  loadAndViewImage(imageId);
});

toolButton.addEventListener("click", () => {
  _initTool();
});

console.log(cornerstone);

cornerstoneTools.init({
  showSVGCursors: true,
});

cornerstone.enable(imageHolder);

function _initTool() {
  const EllipticalRoiTool = cornerstoneTools.EllipticalRoiTool;
  // let imageId;

  cornerstoneTools.addTool(EllipticalRoiTool);
  cornerstoneTools.setToolActive("EllipticalRoi", { mouseButtonMask: 1 });
}

windowing.addEventListener("click", (e) => {
  let viewport = cornerstone.getViewport(imageHolder);
  viewport.voi.windowWidth = parseFloat(newWidth.value);
  viewport.voi.windowCenter = parseFloat(newCenter.value);
  cornerstone.setViewport(imageHolder, viewport);
});

function loadAndViewImage(imageId) {
  cornerstone
    .loadImage(imageId)
    .then((image) => {
      image.windowWidth = 3000;
      image.windowCenter = 1500;

      cornerstone.displayImage(imageHolder, image);
      console.log(image);
    })
    .catch((e) => console.log(e));
}

function _initCornerstone() {
  // Externals
  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
  cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
  cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
  cornerstoneTools.external.cornerstone = cornerstone;
  cornerstoneTools.external.Hammer = Hammer;
  localStorage.setItem("debug", "cornerstoneTools");
  // Image Loader
  const config = {
    maxWebWorkers: navigator.hardwareConcurrency || 1,
    startWebWorkersOnDemand: true,
    taskConfiguration: {
      decodeTask: {
        initializeCodecsOnStartup: false,
        usePDFJS: false,
      },
    },
  };
  cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
}

【讨论】：