请教Cornerstone问题

请教老哥们,# Cornerstone 他这个图片包含了信息 现在一张图显示没问题, 但是一张图里面包含了还有图片就解析不了,就是多帧,想达到的效果是可以滚动显示图片里面的多张图片

//引入 cornerstone,dicomParser,cornerstoneWADOImageLoader import * as cornerstone from "cornerstone-core"; import * as dicomParser from "dicom-parser"; // 不建议 npm 安装 cornerstoneWADOImageLoader 如果你做了 会很头疼 import * as cornerstoneWADOImageLoader from "../../static/dist/cornerstoneWADOImageLoader.js"; // Cornerstone 工具外部依赖 import Hammer from "hammerjs"; import * as cornerstoneMath from "cornerstone-math"; import * as cornerstoneTools from "cornerstone-tools"; // 指定外部依赖 cornerstoneTools.external.Hammer = Hammer; cornerstoneTools.external.cornerstone = cornerstone; cornerstoneTools.external.cornerstoneMath = cornerstoneMath; cornerstoneWADOImageLoader.external.cornerstoneMath = cornerstoneMath; //指定要注册加载程序的基石实例 cornerstoneWADOImageLoader.external.cornerstone = cornerstone; cornerstoneWADOImageLoader.external.dicomParser = dicomParser; cornerstone.registerImageLoader("http", cornerstoneWADOImageLoader.loadImage); cornerstone.registerImageLoader("https", cornerstoneWADOImageLoader.loadImage); //配置 webWorker (必须配置) //注意这里的路径问题 如果路径不对 cornerstoneWADOImageLoaderWebWorker 会报错 index.html Uncaught SyntaxError: Unexpected token < var config = { webWorkerPath: "/static/dist/cornerstoneWADOImageLoaderWebWorker.js", taskConfiguration: { decodeTask: { codecsPath: "/static/dist/cornerstoneWADOImageLoaderCodecs.js" } } }; cornerstoneWADOImageLoader.webWorkerManager.initialize(config);

export default { name: "HelloWorld", data () { return { baseUrl: "", exampleStudyImageIds: [], isInitLoad: true, isShow: true, imageInfo: {}, // task-helper.js taskPool: [], // 请求池 numRequest: 0, // 正在执行数量 maxRequest: 4,// 可配置 taskTimer: null,// 轮询的定时器 cachedTask: {},// 存放的任务数据 stack: { currentImageIdIndex: 0, imageIds: null }, }; }, methods: { addTaskIntoPool (task) { return new Promise((resolve, reject) => { const cache = cachedTask[task.key]; const subscribe = (executeRes) => { if (executeRes.success) { resolve(executeRes.res) } else { reject(executeRes.err) } }; const priority = (task.priority || task.priority === 0) || 999; if (cache) { cache.priority = priority; const callbacks = cache.callbacks || []; callbacks.push(subscribe) } else { task.callbacks = [subscribe] cachedTask[task.key] = task; taskPool.push(task); } }) }, /*鼠标滚轮事件 */ mousewheelChange () { let _this = this; const wheelEvents = ['mousewheel', 'DOMMouseScroll']; wheelEvents.forEach((eventType) => { this.element.addEventListener(eventType, this.mousewheelHandle); }); },

mousewheelHandle (e) {
  let _this = this;
  // Firefox e.detail > 0 scroll back, < 0 scroll forward
  // chrome/safari e.wheelDelta < 0 scroll back, > 0 scroll forward
  if (e.wheelDelta < 0 || e.detail > 0) {//向下滚动
    _this.currentImageIndex++;
    if (_this.currentImageIndex > _this.nowSeries.length - 1) {
      _this.currentImageIndex = 0
    }
  } else {//向上滚动
    _this.currentImageIndex--;
    if (_this.currentImageIndex < 0) {
      _this.currentImageIndex = _this.nowSeries.length - 1
    }
  }
  _this.updateTheImage(_this.currentImageIndex);//根据 ID 索引切换图像

  // 防止页面滚动
  return false;
},
show () {
  const _this = this;
  if (this.isShow === true) {
    this.isShow = false;
    this.$http
      .get("")
      .then(function (res) {
        console.log("res:", res);

        // let Image = res.body.value;
        // console.log("res.body.value:", res.body.value);

        // _this.baseUrl = res.body.value.filmain;
        // console.log("res.body.value.filmain:", res.body.value.filmain);

        // _this.exampleStudyImageIds = res.body.value.testDate.testDate1;
        console.log(
          "res.body.value.testDate.testDate1:",
          // res.body.value.filmain
        );

        // 找到要渲染的元素
        let canvas = this.$refs.canvas;
        console.log(canvas);
        // 在 DOM 中将 canvas 元素注册到 cornerstone
        cornerstone.enable(canvas);
        // 拼接 url : cornerstoneWADOImageLoader 需要 wadouri 路径头
        // 拼接 url : cornerstoneWADOImageLoader 需要 wadouri 路径头
        // const imageUrl = _this.baseUrl + _this.exampleStudyImageIds[0];
        // let imageId = "wadouri:" + imageUrl;

        const imageUrl = _this.baseUrl + _this.exampleStudyImageIds[0];
        // let imageId = "wadouri:" + imageUrl;
        let imageId = "wadouri:" + '';
        //  Load & Display
        cornerstone.loadAndCacheImage(imageId).then(
          function (image) {
            console.log(image);
            // 设置元素视口
            var viewport = cornerstone.getDefaultViewportForImage(
              canvas,
              image
            );
            // 显示图像
            cornerstone.displayImage(canvas, image, viewport);
            // 激活工具
            _this.initCanvasTools();
            console.log(image)
            //获取图片信息
          },
          function (err) {
            alert(err);
            console.log(err)
          }
        );

        // Dicom 加载 进度
        cornerstone.events.addEventListener(
          "cornerstoneimageloadprogress",
          function (event) {
            const eventData = event.detail;
            const loadProgress = document.getElementById("loadProgress");
            loadProgress.textContent = `Dicom加载: ${
              eventData.percentComplete
            }%`;
          }
        );
      });
  } else {
    this.isShow = true;
  }
},
// 测试
test () {
  const _this = this;
  // this.$http
  //   .get("http://192.168.100.136:8099/test")
  //   .then(function(res) {
  //     console.log(res)
  //   })
  // 找到要渲染的元素
  let canvas = this.$refs.canvas;
  console.log(canvas);
  // 在 DOM 中将 canvas 元素注册到 cornerstone
  cornerstone.enable(canvas);
  // let imageId = "wadouri:" + imageUrl;
  let imageId = "wadouri:" + 'http://192.168.100.137:8099/test';
  //  Load & Display
  cornerstone.loadAndCacheImage(imageId).then(
    function (image) {
      // console.log(image);
      // 设置元素视口
      var viewport = cornerstone.getDefaultViewportForImage(
        canvas,
        image
      );
      // 显示图像
      cornerstone.displayImage(canvas, image, viewport);
      // 激活工具
      // _this.exampleStudyImageIds=image.data
      _this.initCanvasTools();
      console.log(image.data.elements)
      _this.getImageInfo(image);//获取图片信息

      console.log(_this.exampleStudyImageIds)
    },
    function (err) {
      console.log(err)
    }
  );

  // Dicom 加载 进度
  cornerstone.events.addEventListener(
    "cornerstoneimageloadprogress",
    function (event) {
      const eventData = event.detail;
      const loadProgress = document.getElementById("loadProgress");
      loadProgress.textContent = `Dicom加载: ${eventData.percentComplete}%`;
    }
  );
},

initCanvasTools () {
  let _self = this;
  let canvas = this.$refs.canvas;
  this.isInitLoad = false;

  // 为 canvasStack 找到 imageIds
  let allImageIds = [];
  // let allImageIds = this.exampleStudyImageIds
  this.exampleStudyImageIds.forEach((imageId, index) => {
    let imageUrl = "wadouri:" + _self.baseUrl + imageId;
    allImageIds.push(imageUrl);
    console.log(allImageIds)
  });

  // Create canvasStack
  let canvasStack = {
    currentImageIdIndex: 0,
    imageIds: allImageIds
  };
  console.log(allImageIds)
  // Enable Inputs
  cornerstoneTools.mouseInput.enable(canvas);
  cornerstoneTools.mouseWheelInput.enable(canvas);
  cornerstoneTools.touchInput.enable(canvas);

  // Set the stack as tool state
  cornerstoneTools.addStackStateManager(canvas, ["stack"]);
  cornerstoneTools.addToolState(canvas, "stack", canvasStack);
  cornerstoneTools.stackScrollWheel.activate(canvas); // Mouse wheel
  cornerstoneTools.scrollIndicator.enable(canvas); // Position indicator

  // Mouse
  cornerstoneTools.wwwc.activate(canvas, 1); // left click
  cornerstoneTools.pan.activate(canvas, 2); // middle click
  cornerstoneTools.zoom.activate(canvas, 4); // right click
  // cornerstoneTools.zoomWheel.activate(canvas);

  // Touch / Gesture
  cornerstoneTools.wwwcTouchDrag.activate(canvas); // - Drag
  cornerstoneTools.zoomTouchPinch.activate(canvas); // - Pinch
  cornerstoneTools.panMultiTouch.activate(canvas); // - Multi (x2)

  // touch
  cornerstoneTools.wwwcTouchDrag.deactivate(canvas);
  cornerstoneTools.probeTouch.deactivate(canvas);
  cornerstoneTools.panTouchDrag.deactivate(canvas);
  cornerstoneTools.zoomTouchDrag.deactivate(canvas);
  cornerstoneTools.lengthTouch.deactivate(canvas);
  cornerstoneTools.ellipticalRoiTouch.deactivate(canvas);
  cornerstoneTools.rectangleRoiTouch.deactivate(canvas);
  cornerstoneTools.angleTouch.deactivate(canvas);
  cornerstoneTools.stackScrollTouchDrag.deactivate(canvas);
  cornerstoneTools.arrowAnnotateTouch.deactivate(canvas);
  cornerstoneTools.rotateTouchDrag.deactivate(canvas);
  // cornerstoneTools.rotateTouch.disable(element);

  console.log('工具')
},
/*
   * Window Resize
   *
   */
listenForWindowResize () {
  this.$nextTick(function () {
    window.addEventListener(
      "resize",
      this.debounce(this.onWindowResize, 100)
    );
  });
},
onWindowResize () {
  cornerstone.resize(this.$refs.canvas, true);
},
/*
   * Utility Methods
   *
   */
debounce (func, wait, immediate) {
  var timeout;
  return function () {
    var context = this;
    var args = arguments;
    var later = function () {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
},
getImageInfo (image) {
  this.imageInfo.seriesNumber = image.data.string('x00200011');//图像序列号
  this.imageInfo.imageNum = image.data.string('x00200013');//图像位置
  this.imageInfo.imageDate = image.data.string("x00080021");//拍摄日期
  this.imageInfo.sliceThickness = image.data.string('x00180050');//层厚
  this.imageInfo.patientId = image.data.string('x00100020');//病理号
  // 判断窗宽窗位是否合法
  this.pixelR = image.data.uint16('x00280103');
  this.heightBit = image.data.uint16('x00280102') || '';
  // 病人基本信息
  this.patientName = image.data.string('x00100010');
  this.patientBirthDate = image.data.string('x00100030');
  this.patientID = image.data.string('x00100020');
  this.patientGender = image.data.string('x00100040');
  this.sID = image.data.string('x00200011');
  // 像素间距
  this.pixelSpacing = image.data.string('x00280030');
  this.imagePixelSpacing = image.data.string('x00181164') || '';
  this.rowPixelSpacing = image.rowPixelSpacing;
  // 放射放大系数
  this.magnification = Number(image.data.string('x00181114'));
  // 放射源到面板的距离
  this.sourceTOdetector = image.data.string('x00181110');
  // 放射源到病人的距离
  this.sourceTOpatient = image.data.string('x00181111');
  //this.modalityLUT = cornerstone.metaData.get('modalityLutModule', image.imageId).modalityLUTSequence;
  this.voiContent = cornerstone.metaData.get('voiLutModule', image.imageId);
  // 斜率截距
  this.rescaleIntercept = Number(image.data.string('x00281052'));
  this.rescaleSlope = Number(image.data.string('x00281053'));
  console.log(this.imageInfo)
},

}, mounted () { // this.show(); this.test() // this.test8()

} };