Comment manipuler des images IRM dans un navigateur ?

1. MANIPULATION DES
IMAGES IRM SUR
NAVIGATEUR
Tarik Zakaria Benmerar
Equipe ParIMed

2. LES LOGICIELS EXISTANTS DE
MANIPULATION DES IMAGES IRM

3. 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.

4. NÉANMOINS LE
NAVIGATEUR EST UN
ENVIRONNEMENT A PART.

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

6. 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, Float
64 bits, etc.).
 Deux Méthodes pour lire le fichier sour Array
Buffer :
 Requête AJAX (Lecture à partir d’un url).
 Lecture avec un champs fichier (Lecture locale).

7. 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.

8. ETAPE 1: LIRE LE FICHIER SOUS
UNE STRUCTURE DE DONNÉES
ARRAY BUFFER
 Patch XHR2 responseType pour jQuery :

9. 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.

10. 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 locally
fileReader.onload = function ( e )
{
var fileArrayBuffer =
e.target.result;
//Manipuler le fichier ici.
}
fileReader.readAsArrayBuffer( file
);
});

11. ETAPE 2 : PARSER LE FICHIER IRM
SOUS FORMAT NIFTI
 Utiliser un Typed Array pour extraire
chaque partie du fichier d’IRM.

12. ETAPE 2 : PARSER LE FICHIER IRM
SOUS FORMAT NIFTI
 Documentation NIFTI (Header +
Volumes).

13. 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

14. 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.

15. 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

16. 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;
}

17. ETAPE 3 : AFFICHER UNE COUPE
IRM.
 WebGL.
 La bibliothèque Three.JS offre le DataTexture
pour avoir une texture a partir d’un typed
array.

18. ETAPE 4 : INTERAGIR AVEC LA
COUPE IRM.
 Sur Desktop : Utilisation des évenements
jQuery (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).

19. D’AUTRES CONSIDIRATIONS
TECHNIQUES.
 Web Worker : Traitement sur un Thread
pour ne pas bloquer l’interface
utilisateur.
 Indexed Database : Stockage sur le client des
images.

20. MERCI POUR VOTRE ATTENTION.