Отображение многокадровых изображений dicom с использованием холста HTML5 и Javascript

Question

Я пытаюсь отображать многокадровые изображения dicom в браузере с помощью холста HTML5 и javascript. Пока что я могу сделать одиночные обрамленные изображения просто прекрасными, но у меня проблемы с изображениями с несколькими кадрами.

Для разбора файла я использую плагин DicomParser.

Когда я разбиваю данные на его фрагменты (кадры) и пытаюсь отобразить их, холст просто отображает полосы шума. Вот пример рендеринга одного кадра из многокадрового изображения.

Ниже приведен javscript код

// 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 ]); 
    } 
} 
}; 

Может кто-нибудь сказать мне, где я буду неправильно. Любая информация вообще, как бы она ни была, была бы полезной.

Конечной целью является использовать эти кадры в качестве текстур для WebGL и three.js для создания объемного рендеринга изображений DICOM

Answer 1

кадров изображения в файл нескольких кадров, вероятно, сжат и dicomParser не включает в себя код декомпрессионной , Посмотрите на CornerstoneWADOImageLoader для кодеков и как их использовать: https://github.com/chafey/cornerstoneWADOImageLoader