Я пытаюсь отобразить многокадровые изображения dicom в браузере, используя холст HTML5 и javascript. Пока я могу нормально отображать изображения с одним кадром, но у меня возникают проблемы с изображениями с несколькими кадрами.
Для анализа файла я использую плагин DicomParser.
Когда я разбиваю данные на фрагменты (кадры) и пытаюсь отобразить их, холст просто отображает полосы шума. Вот пример рендеринга одного кадра из многокадрового изображения.
Ниже приведен код JavaScript
// 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.