HTML5キャンバスとJavascriptを使用したマルチフレームdicom画像の表示

Question

HTML5キャンバスとJavaScriptを使用して、マルチフレームのdicom画像をブラウザに表示しようとしています。これまでのところ、1枚のフレーム画像をきれいにすることはできますが、マルチフレーム画像には問題があります。

ファイルの解析には、DicomParserプラグインを使用しています。

データをフラグメント（フレーム）に分割して表示しようとすると、キャンバスがノイズのバーをレンダリングするだけです。マルチフレーム画像から1つのフレームをレンダリングする例を紹介します。以下は

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

です。しかし、一般的な情報は役に立ちます。

最終目標は、あなたのマルチフレームファイル内

Answer 1

画像フレームはおそらく圧縮され、dicomParserが伸長コードが含まれていないDICOM画像の体積レンダリングを作成するために、WebGLのためのテクスチャとthree.jsとして、これらのフレームを使用することです。 CornerstoneWADOImageLoaderでコーデックとその使い方をご覧ください。 https://github.com/chafey/cornerstoneWADOImageLoader