Anzeigen von Multiframe dicom Bildern mit HTML5 Canvas und Javascript

Question

Ich versuche, Multi-Frame dicom Bilder in einem Browser mit HTML5 Canvas und Javascript anzuzeigen. Bis jetzt kann ich einzelne gerahmte Bilder gut wiedergeben, aber ich habe Probleme mit multi-gerahmten Bildern.

Für die Datei Parsen ich das DicomParser-Plugin.

Wenn ich die Daten in ihre Fragmente (Frames) zerlege und versuche, sie anzuzeigen, erzeugt die Leinwand nur Rauschen. Hier ist ein Beispiel für das Rendern eines einzelnen Frames aus einem Multiframe-Bild.

unten ist die javscript Code

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

jemand könnte mir sagen, wo ich falsch gehe. Irgendwelche Informationen, wie allgemein sie auch sein mögen, wären hilfreich.

Das Endziel ist es, diese Bilder als Texturen für WebGL und three.js verwenden volumetrischen Darstellung von dicom Bilder

Answer 1

Die Bildrahmen in Ihrem Multi-Frame-Datei zu erstellen, werden wahrscheinlich komprimiert und dicomParser nicht Dekomprimierungscode umfassen . Werfen Sie einen Blick auf CornerstoneWADOImageLoader für Codecs und wie man sie verwendet: https://github.com/chafey/cornerstoneWADOImageLoader