HTML5 캔버스와 자바 스크립트를 사용하여 multiframe dicom 이미지 표시

Question

HTML5 캔버스와 자바 스크립트를 사용하여 브라우저에 멀티 프레임 dicom 이미지를 표시하려고합니다. 지금까지 단일 프레임 이미지를 잘 렌더링 할 수 있지만 다중 프레임 이미지에 문제가 있습니다.

파일을 구문 분석 할 때 나는 DicomParser 플러그인을 사용하고 있습니다.

데이터를 조각 (프레임)으로 분해하고 표시하려고 할 때 캔버스가 노이즈 바를 렌더링합니다. 다중 프레임 이미지에서 단일 프레임을 렌더링하는 예를 보여줍니다.

다음은 내가 잘못거야 어디

// CREATE A CANVAS REFERENCE 
// ------------------------------------------------------------------------------------------------- 
var canvas = document.getElementById('canvas'); 
canvas.with = 200; 
canvas.height = 200; 


// ADD A HANDLER FOR READING FILES FROM COMPUTER 
// ------------------------------------------------------------------------------------------------- 
var dicomFile = document.getElementById('dicomfile'); 

dicomFile.onchange = function(evt) { 
    var tgt = evt.target || window.event.srcElement, 
     files = tgt.files; 


// FILEREADER SUPPORT 
// --------------------------------------------------------------------------------------------- 
if (FileReader && files && files.length) { 
    var fr = new FileReader(), 
     extension = files[ 0 ].name.split('.').pop().toLowerCase(); 

    // IF EXTENSION IS NOT DCM ,THEN STOP PROCESSING FURTHER AND EXIT. 
    if (extension !== 'dcm') { 
     alert('please choose a Dicom file'); 
     return; 
    } else { 

     // PARSE AND PROCESS THE DICOM FILE. 
     fr.onload = function(e) { 

      var dicomArray = new Uint8Array(e.target.result), 

       // PARSE THE DICOM FILE 
       dataSet = dicomParser.parseDicom(dicomArray), 

       // GET WIDTH AND HEIGHT OF THE DICOM IMAGE. 
       width = dataSet.uint16('x00280011'), height = dataSet.uint16('x00280010'), 

       // GET THE PIXEL DATA ELEMENT FROM THE DATASET. 
       pixelDataElement = dataSet.elements.x7fe00010; 

      // NOW GET THE PIXEL DATA FROM THE DICOM FILE. 
      var pixelData = []; 

      pixelDataElement.basicOffsetTable.forEach(function(offset){ 
       pixelDataElement.fragments.forEach(function(fragment){ 
        pixelData.push(new Uint8Array(dataSet.byteArray.buffer, offset, fragment.length)); 
       }); 
      }); 

      // NOW WE HAVE GOT WIDTH, HEIGHT AND PIXEL DATA WHICH IS ALL IT TAKES TO RENDER A IMAGE TO THE CANVAS. 
      canvas.width = width; 
      canvas.height = height; 

      // GET CONTEXT 
      var context = canvas.getContext('2d'), 

      // GET IMAGE DATA TO UPDATE 
       imageData = context.getImageData(0, 0, width, height), 
       data = imageData.data; 

      // UPDATING ALPHA 
      for (var i = 3, k = 0; i < data.byteLength; i = i + 4, k = k + 2) { 

       // CONVERT 16-BIT TO 8-BIT ,BECAUSE WE CANNOT RENDER A 16-BIT VALUE TO THE CANVAS. 
       var result = ((pixelData[0][ k + 1 ] & 0xFF) << 8) | (pixelData[0][ k ] & 0xFF); 
       result = (result & 0xFFFF) >> 8; 
       data[ i ] = 255 - result; 
      } 

      imageData[0] = data[0]; 

      context.putImageData(imageData, 0, 0); 

      // SHOW THE CANVAS 
      canvas.style.display = 'block'; 
     }; 
     fr.readAsArrayBuffer(this.files[ 0 ]); 
    } 
} 
}; 

사람이 말해 줄 수 있 었는가에 javscript 코드를입니다. 모든 정보가 일반적으로 도움이 될 것입니다.

최종 목표는 멀티 프레임 파일에

Answer 1

이미지 프레임 가능성이 압축되어 dicomParser이 압축 해제 코드를 포함하지 않는 DICOM 이미지의 체적 렌더링을 만들 WebGL에 대한 질감 및 three.js를 이러한 프레임을 사용하는 것입니다 . CornerstoneWADOImageLoader에서 코덱 및 사용 방법을 확인하십시오. https://github.com/chafey/cornerstoneWADOImageLoader