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...
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érique...
ETAPE 1: LIRE LE FICHIER SOUS
UNE STRUCTURE DE DONNÉES
ARRAY BUFFER
 Récupération d’un Array Buffer avec Ajax
:
 Utilisa...
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 :
 ...
ETAPE 1: LIRE LE FICHIER SOUS
UNE STRUCTURE DE DONNÉES
ARRAY BUFFER
$(‘#file’).on(‘change’, function ( e ) {
var fileReade...
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...
ETAPE 3 : AFFICHER UNE COUPE
IRM.
 Les volumes IRM sont en faites des
intensités de signaux
 Pour l’affichage 2D, on uti...
ETAPE 3 : AFFICHER UNE COUPE
IRM.
 Canvas2D.
 Créer un canvas avec hauter et largeur égale
à la coupe.
 canvas.getImage...
ETAPE 3 : AFFICHER UNE COUPE
IRM.
 Canvas2D.
for( var i = 0; i < canvas.width; i++ ) {
for( var j = 0; j < canvas.height;...
ETAPE 3 : AFFICHER UNE COUPE
IRM.
 WebGL.
 La bibliothèque Three.JS offre le DataTexture
pour avoir une texture a partir...
ETAPE 4 : INTERAGIR AVEC LA
COUPE IRM.
 Sur Desktop : Utilisation des évenements
jQuery (mousemove, mouseup, mouse
down)....
D’AUTRES CONSIDIRATIONS
TECHNIQUES.
 Web Worker : Traitement sur un Thread
pour ne pas bloquer l’interface
utilisateur.
...
MERCI POUR VOTRE ATTENTION.
Prochain SlideShare
Chargement dans…5
×

Manipulation des images IRM sur navigateur - Informatique Humaine et Médicale CSE 2014

602 vues

Publié le

Comment manipuler des images IRM dans un navigateur ?

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
602
Sur SlideShare
0
Issues des intégrations
0
Intégrations
14
Actions
Partages
0
Téléchargements
9
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Manipulation des images IRM sur navigateur - Informatique Humaine et Médicale CSE 2014

  1. 1. MANIPULATION DES IMAGES IRM SUR NAVIGATEUR Tarik Zakaria Benmerar Equipe ParIMed
  2. 2. LES LOGICIELS EXISTANTS DE MANIPULATION DES IMAGES IRM
  3. 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. 4. NÉANMOINS LE NAVIGATEUR EST UN ENVIRONNEMENT A PART.
  5. 5. LES ÉTAPES À SUIVRE POUR MANIPULER UNE IMAGE IRM (FORMAT NIFTI).
  6. 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. 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. 8. ETAPE 1: LIRE LE FICHIER SOUS UNE STRUCTURE DE DONNÉES ARRAY BUFFER  Patch XHR2 responseType pour jQuery :
  9. 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. 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. 11. ETAPE 2 : PARSER LE FICHIER IRM SOUS FORMAT NIFTI  Utiliser un Typed Array pour extraire chaque partie du fichier d’IRM.
  12. 12. ETAPE 2 : PARSER LE FICHIER IRM SOUS FORMAT NIFTI  Documentation NIFTI (Header + Volumes).
  13. 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. 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. 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. 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. 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. 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. 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. 20. MERCI POUR VOTRE ATTENTION.

×