manipulation des images irm sur navigateur - informatique humaine et médicale cse 2014

MANIPULATION DES IMAGES IRM SUR

NAVIGATEUR

Tarik Zakaria Benmerar

Equipe ParIMed

LES LOGICIELS EXISTANTS DE MANIPULATION DES IMAGES IRM

LES APPORTS DU NAVIGATEUR

Zéro Installation.

Environnement d’exécution plus sûr (Sandboxing).

Pervasivité (Exécution sur PC, mobile, tablette, etc.).

Facilité d’accès au logiciel (Un seul URL à taper).

Centralisation de la maintenance.

NÉANMOINS LE NAVIGATEUR EST UN ENVIRONNEMENT A PART.

LES ÉTAPES À SUIVRE POUR MANIPULER UNE IMAGE IRM(FORMAT NIFTI).

ETAPE 1: LIRE LE FICHIER SOUS UNE STRUCTURE DE DONNÉES ARRAY BUFFER

Array Buffer représente des données brutes génériques de taille fixe.

Un Typed Array permet de lire le array buffer sous un format donné (Entier 32 bits, Float64 bits, etc.).

Deux Méthodes pour lire le fichier sour ArrayBuffer : Requête AJAX (Lecture à partir d’un url).

Lecture avec un champs fichier (Lecture locale).

ETAPE 1: LIRE LE FICHIER SOUS UNE STRUCTURE DE DONNÉES ARRAY BUFFER

Récupération d’un Array Buffer avec Ajax : Utilisation d’un standard XHR2 responseType.

Pas de support dans jQuery Ajax.

ETAPE 1: LIRE LE FICHIER SOUS UNE STRUCTURE DE DONNÉES ARRAY BUFFER

Patch XHR2 responseType pour jQuery :

ETAPE 1: LIRE LE FICHIER SOUS UNE STRUCTURE DE DONNÉES ARRAY BUFFER

Récupération d’un Array Buffer avec champs file : Ecouter l’évènement change dans un champs file.

Utiliser un FileReader et la méthode readAsArrayBuffer() pour lire le fichier.

ETAPE 1: LIRE LE FICHIER SOUS UNE STRUCTURE DE DONNÉES ARRAY BUFFER

$(‘#file’).on(‘change’, function ( e ) {var fileReader = new FileReader(),

file = e.target.files[ 0 ];//Read the file locallyfileReader.onload = function ( e )

{var fileArrayBuffer =

e.target.result;//Manipuler le fichier ici.}fileReader.readAsArrayBuffer( file

);});

ETAPE 2 : PARSER LE FICHIER IRM SOUS FORMAT NIFTI

Utiliser un Typed Array pour extraire chaque partie du fichier d’IRM.

ETAPE 2 : PARSER LE FICHIER IRM SOUS FORMAT NIFTI

Documentation NIFTI (Header + Volumes).

ETAPE 2 : PARSER LE FICHIER IRM SOUS FORMAT NIFTI

Comment extraire une donnée de l’arraybuffer.var typeBytesNumber = new Array( 1

).byteLength,bytes = new ArrayType( size ),targetBytes = new Uint8Array( dataBuffer,

dataPointer, size * typeBytesNumber ),bytesShadow = new Uint8Array( bytes.buffer

);

ETAPE 3 : AFFICHER UNE COUPE IRM.

Les volumes IRM sont en faites des intensités de signaux

Pour l’affichage 2D, on utilise Canvas2D.

Pour l’affichage 3D, on utilise WebGL.

ETAPE 3 : AFFICHER UNE COUPE IRM.

Canvas2D. Créer un canvas avec hauter et largeur égale à la coupe. canvas.getImageData() pour éxtraire un image data comportant un typed array pour le canvas. Insérer le niveau de gris dans l’image data a partir des données IRM, en prenant en compte les intensités minimales et maximales. canvas.getPutImageData() pour l’affichage sur canvas.

ETAPE 3 : AFFICHER UNE COUPE IRM.

Canvas2D.for( var i = 0; i < canvas.width; i++ ) {

for( var j = 0; j < canvas.height; j++ ) {var color = ( volume[ i + indiceCoupe * dimX + j *

dimX * dimY ] / max ) * 255;imgData.data[ ( i + j * canvas.width ) * 4 ] =

color;imgData.data[ ( i + j * canvas.width ) * 4 + 1 ] =

color;imgData.data[ ( i + j * canvas.width ) * 4 + 2 ] =

color;}

}

ETAPE 3 : AFFICHER UNE COUPE IRM.

WebGL. La bibliothèque Three.JS offre le DataTexturepour avoir une texture a partir d’un typedarray.

ETAPE 4 : INTERAGIR AVEC LA COUPE IRM.

Sur Desktop : Utilisation des évenementsjQuery (mousemove, mouseup, mouse down). Utiliser le plugin jQuery.mousewheel pour gérer la roulette.

Sur Mobile : Une bibliothèque tel que QuoJS fera l’affaire. Utiliser des évènements qui se déclenche pendant l’intéraction(Swiping, Pinching, Rotating), mais pas à la fin (Swipe, Pinch).

D’AUTRES CONSIDIRATIONSTECHNIQUES.

Web Worker : Traitement sur un Thread pour ne pas bloquer l’interface utilisateur. Indexed Database : Stockage sur le client des images.

MERCI POUR VOTRE ATTENTION.