Affichage d'images Dicom multitrames en utilisant HTML5 et canvas

Question

J'essaie d'afficher des images Dicom multi-images dans un navigateur en utilisant HTML5 toile et javascript. Jusqu'à présent, je peux très bien rendre les images à cadre unique, mais j'ai des problèmes avec les images multi-cadres.

Pour l'analyse du fichier, j'utilise le plugin DicomParser.

Lorsque je casse les données dans ses fragments (images) et essaye de les afficher, le canevas ne fait que restituer des barres de bruit. Voici un exemple de rendu d'une seule image à partir d'une image multi-images.

est Ci-dessous le code 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 ]); 
    } 
} 
}; 

Quelqu'un pourrait-il me dire où je vais mal. Toute information, même générale, serait utile.

L'objectif final est d'utiliser ces images comme textures pour WebGL et Three.js pour créer le rendu volumétrique des images DICOM

Answer 1

Les trames d'image dans votre fichier d'images multiples sont probablement compressés et dicomParser ne comprend pas le code de décompression . Jetez un oeil à CornerstoneWADOImageLoader pour les codecs et comment les utiliser: https://github.com/chafey/cornerstoneWADOImageLoader