Articles tagués Javascript

Affichage d’images en haute résolution avec OpenSeadragon

Publié par Pierre COUCHET dans 5. Données et traitement des données le 29 juillet 2015

« Pour voir loin, il faut y regarder de près » Pierre Dac

OpenSeadragon est une bibliothèque javascript Open Source (Licence BSD) qui facilite la visualisation des détails d’une image haute résolution dans un navigateur en permettant de facilement zoomer et dézoomer sur une zone, avec la souris, avec les doigts (écran tactile), ou bien en cliquant sur un ensemble de boutons dédiés.On passe alors facilement d’une vue générale à l’exploration des détails, de manière simple, fluide, sans latence. Le temps de chargement d’une image lourde devient réduit et la bande passante est ainsi économisée.

De multiples options permettent de finement configurer OpenSeadragon et de l’adapter à différents besoins. Il est notablement possible de visualiser des diaporamas d’images zoomables, de créer des sur-couches mettant en évidence des zones particulières, de comparer sur le même écran deux images haute résolution différentes. Les bibliothèques, les musées et les archives sont les principaux utilisateurs de cette bibliothèque javascript qui sert souvent à afficher des cartes, des manuscrits anciens, des photographies, des œuvres d’art numérisées. Basée sur OpenSeadragon, la visionneuse Mirador (Stanford, Harvard) se distingue. Elle permet par exemple de visualiser simultanément deux images, de naviguer dans des ensembles d’images par l’intermédiaire de vignettes, pour consulter un livre ancien par exemple. Mirador est testé actuellement par Biblissima (Campus Condorcet) qui propose une démonstration intéressante pour les amateurs d’archives et de documents anciens.

La fabrication et l’affichage des images avec OpenSeadragon se fait en deux étapes :

  1. Création d’images zoomables : L’image haute résolution d’origine est transformée automatiquement en une série d’images de petites dimensions appelées « tuiles » (tile en anglais), de forme carrée et localisées dans une arborescence spéciale. Cette transformation peut être faite de manière programmée (C++, PHP, Python, PERL, .NET, Node.js) ou bien à l’aide de logiciels de bureautique libres tels que Deep Zoom Composer (Microsoft) ou bien MapTiler (Klokan Technologies). OpenSeadragon accepte les formats de tuiles DZI et TMS.
  2. Affichage de l’image dans le navigateur : la bibliothèque javascript permet l’affichage des images ainsi créées et ajoute les boutons qui permettent le zoom, le déplacement et le passage plein écran de l’image.

Quelques liens

Démos :

Quelques sites et pages :

Tutoriel

Voici un rapide tutoriel qui va vous permettre de tester OpenSeadragon et de réaliser vous-même des images zoomables. Vous disposez d’un serveur local et d’un PC sous windows (c’est un peu ringard mais ça marche et c’est ce que j’ai souvent sous la main !).

  1. Téléchargez la version zip d’OpenSeadragon ici.
  2. Dézippez le fichier.
  3. Copiez le répertoire « openseadragon-bin-2.0.0 » sur le répertoire du serveur local en le renommant « openseadragon ».
  4. Convertissez votre image haute résolution. Téléchargez Deep Zoom Composer.
  5. Installez Deep Zoom Composer et ouvrez un nouveau projet avec « New Project ».
  6. En haut à droite, ajoutez une image avec « Add Image ».

    dzc-import

    Appuyer sur Import

  7. Cliquez en haut sur « Compose » et glissez l’icone de votre image en bas à gauche dans le panneau du milieu. Peu importe où.

    Appuyez sur Compose

    Appuyez sur Compose

  8. Cliquez en haut sur « Export », entrez à droite le nom du répertoire d’export dans « Name » et le lieu dans « Location » (le répertoire du serveur). Sélectionnez « Export as a composition (single image) ».

    Appuyez sur Export

    Appuyez sur Export

  9. Cliquez sur « Export » en bas à droite.
  10. Cliquez sur « View Image Folder » pour bien repérer la localisation du fichier « dzc_output.xml » à paramétrer dans le code sous le nom « tileSources ».
  11. Le répertoire « dzc_output_files » contient l’image convertie.
  12. Adaptez et insérez le code dans votre page HTML, visualisez dans votre navigateur favori et voilà.

openseadragon

Une version de Virgile imprimée en 1561 et annotée (bibliothèque d'Harvard), visible avec OpenSeadragon

Une version de Virgile imprimée en 1561 et annotée (bibliothèque d’Harvard), visible avec OpenSeadragon/Mirador, Biblissima (Campus Condorcet)

Conclusion

OpenSeadragon est une bibliothèque javascript libre développée et maintenue par Ian Gilman et utilisée entre autres par des organismes du type université, bibliothèque nationale, laboratoire de recherche. Il est tout à fait possible d’envisager l’usage de cette fort intéressante bibliothèque javascript dans une multitude de domaines scientifiques, non seulement en humanités numériques, mais encore en archéologie, agronomie, études sur l’environnement, médecine et biologie (microscopie), physique, astronomie qui exploitent des images en haute résolution. Des services dans le cloud pourraient être créés, susceptibles de faciliter la gestion d’images de ce type, analogue au maintenant disparu Zoom.it de Microsoft. Des modules DZI/OpenSeadragon existent déjà, permettant d’augmenter les possibilités des grands gestionnaires de contenus libres que sont Drupal ou WordPress, des gestionnaires de documents tels que DSpace, Omeka, Pleade.

La technologie libre OpenSeadragon semble prometteuse dans l’objectif de rendre accessible et aisément manipulable des images en très haute résolution. Des technologies libres potentiellement équivalentes sont Leaflet (Open Street map), OpenLayers, PanoJS. D’autres systèmes libres s’avèrent plus difficiles à mettre en œuvre comme IIPImage, digilib. Certains systèmes propriétaires peuvent être cités tels que jQuery Image Viewer, zoomify, ajax-zoom, shockwave-flash (Adobe) ou gigapan (NASA, Google). Des bibliothèques javascript comme StoryMap JS permettent finalement de raconter des histoires avec une image au format gigapixel.

À noter également pour des images de taille standard la possibilité d’utiliser des bibliothèques javascript (jquery ou autre) dédiées au zoom, ou bien un code javascript utilisant les fonctionnalités d’HTML5. La génération de tuiles n’est alors pas nécessaire.

, , , ,

Poster un commentaire