cornerstonejs / cornerstone

JavaScript library to display interactive medical images including but not limited to DICOM
https://docs.cornerstonejs.org/
MIT License
2.04k stars 596 forks source link

Need some help in displaying an arraybuffer using cornerstone #499

Open ajinidev opened 3 years ago

ajinidev commented 3 years ago

Hi All,

I was trying to load a single frame Dicom image using cornerstoneWadoImageLoader and it works fine. But in the current situation, I will get the array buffer of the file as the input to the module which is responsible to render the image using cornerstone.

So, in this case, I am not able to use any existing loaders. So, I was trying to write a custom loader and something went wrong here.

it is parsing the data, but not able to render it properly. In the below code snippet, I am using FileReader to prepare the array buffer which would be the input to the actual implementation.

can someone help to fix this?

    let fileReader = new FileReader();
    fileReader.onload = (e) => {

        let arrayBuffer: ArrayBuffer = fileReader.result as ArrayBuffer;
        var byteArray = new Uint8Array(arrayBuffer);
        var dataSet = cornerstoneWADOImageLoader.external.dicomParser.parseDicom(
            byteArray
        );
        dataSet.urls = ["xyz"];
        if (!dataSet) {
            return;
        }
        console.log(cornerstoneWADOImageLoader.wadouri)

        cornerstone.registerImageLoader("myImageLoader", (imageId) => {
          // var pixelData = dataSet.elements.x7fe00010;
          // var pixelData = dataSet.string('x7fe00010');
          // console.log(pixelData)
          var pixelData = this.getPixelData(dataSet);

          const height = dataSet.uint16("x00280010");
          const width = dataSet.uint16("x00280011");
          let minMax = this.getMinMax(pixelData);
          let minPixelValue = minMax.min;
          let maxPixelValue = minMax.max;
          let windowCenter = dataSet.string("x00281050");
          let windowWidth = dataSet.string("x00281051");
          windowCenter = windowCenter
              ? windowCenter
              : (maxPixelValue - minPixelValue) / 2;
          windowWidth = windowWidth ? windowWidth : maxPixelValue - minPixelValue;
          function getPixelData() {
            console.log(pixelData)
              return pixelData;
          }
          let image: any = {
              imageId: dataSet.urls[0],
              minPixelValue: minPixelValue,
              maxPixelValue: maxPixelValue,
              slope: 1.0,
              intercept: 0,
              windowCenter: windowCenter,
              windowWidth: windowWidth,
              render: cornerstone.renderGrayscaleImage,
              getPixelData: getPixelData,
              rows: height,
              columns: width,
              height: height,
              width: width,
              color: false,
              columnPixelSpacing: undefined,
              rowPixelSpacing: undefined,
              invert: false,
              sizeInBytes: pixelData.byteLength,
          };
            return {
                promise: new Promise((resolve) => resolve(image)),
                cancelFn: undefined,
            };
        });
        // load the image and display it
        const imageId = "myImageLoader://xyz";
        cornerstone.loadImage(imageId).then((image) => {
          console.log(image)
            cornerstone.displayImage(this.element, image);
        });
    };
    fileReader.readAsArrayBuffer(this.cornerstoneService.file);

Regards Abhijith

statfs commented 2 years ago
      let minMax = this.getMinMax(pixelData);

maybe the min and max in wrong range.