Présentation d'images en très grande résolution
Le
Stephan Peccini
Bonjour,
Pour présenter mes grands panoramas en résolution maximale (à la mode=
Google Earth), j'utilisais les services de zoom.it de Microsoft. Depuis qu=
elques temps, ce service ne permet plus de soumettre de nouvelles demandes.
Je me suis donc retourné vers la solution openseadragon (ouverture du cod=
e de zoom.it) pour la partie présentation et vips pour créer les tuiles=
nécessaires à la présentation. Il faut un peu plus de manipulations =
que pour zoom.it mais c'est relativement simple et surtout on a la main sur=
la présentation.
Openseadragon : https://openseadragon.github.io/
vips : http://www.vips.ecs.soton.ac.uk/index.php?title=VIPS
Déjà le résultat :
http://grandspanoramas.peccini.fr/Haut-Atlas%202014/DSC_3064-DSC_3071.html
Vous pouvez zoomer dans l'image ou vous y déplacer avec la molette et la =
souris.
Comment obtenir le résultat ?
La première chose à faire est de transformer votre image en haute rés=
olution vers un ensemble de fichiers permettant de proposer l'effet de zoom=
.
Il existe plusieurs solutions pour y arriver (https://openseadragon.github.=
io/examples/creating-zooming-images/) et j'ai choisi vips pour sa très gr=
ande rapidité : quelques secondes pour une image d'origine en 200 Mpixels=
.
Sous linux (sous Windows, c'est aussi simple), je lance la commande :
vips dzsave DSC_3064-DSC_3071.JPG dz
Elle me génère un répertoire DSC_3064-DSC_3071 avec toutes les tuiles=
de diverses dimensions et un fichier xml de description DSC_3064-DSC_3071.=
dzi.
Il faut ensuite préparer le serveur Web sur lequel vous allez déposer v=
os images.
Pour cela il faut récupérer le moteur openseadragon :
https://openseadragon.github.io/#download
et l'installer sur votre serveur :
https://openseadragon.github.io/docs/
Cela n'est à faire qu'une fois, bien évidemment.
On prépare ensuite le fichier html de présentation ; pour l'exemple que=
je présente, il contient :
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<title>Maroc - La grande traversée du Haut-Atlas - Juillet 2014 - aut=
our d'Iskataffen</title>
</head>
<body background="grey">
<div id="openseadragon1"></div>
<script src="../openseadragon/openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "../openseadragon/images/",
tileSources: "DSC_3064-DSC_3071.dzi",
navigatorSizeRatio: 1
});
</script>
</body>
Vous déposez alors votre fichier html sur votre serveur Web avec le fichi=
er dzi et le répertoire associé. Dans mon exemple j'ai donc à la fin =
:
Racine du site
|____openseadragon
|____Haut-Atlas 2014
|____DSC_3064-DSC_3071.html <== mon fichier de présentation
|____DSC_3064-DSC_3071.dzi <== mon fichier de description des tu=
iles
|____DSC_3064-DSC_3071 <== le répertoire avec les tuiles
C'est fini.
Pour présenter mes grands panoramas en résolution maximale (à la mode=
Google Earth), j'utilisais les services de zoom.it de Microsoft. Depuis qu=
elques temps, ce service ne permet plus de soumettre de nouvelles demandes.
Je me suis donc retourné vers la solution openseadragon (ouverture du cod=
e de zoom.it) pour la partie présentation et vips pour créer les tuiles=
nécessaires à la présentation. Il faut un peu plus de manipulations =
que pour zoom.it mais c'est relativement simple et surtout on a la main sur=
la présentation.
Openseadragon : https://openseadragon.github.io/
vips : http://www.vips.ecs.soton.ac.uk/index.php?title=VIPS
Déjà le résultat :
http://grandspanoramas.peccini.fr/Haut-Atlas%202014/DSC_3064-DSC_3071.html
Vous pouvez zoomer dans l'image ou vous y déplacer avec la molette et la =
souris.
Comment obtenir le résultat ?
La première chose à faire est de transformer votre image en haute rés=
olution vers un ensemble de fichiers permettant de proposer l'effet de zoom=
.
Il existe plusieurs solutions pour y arriver (https://openseadragon.github.=
io/examples/creating-zooming-images/) et j'ai choisi vips pour sa très gr=
ande rapidité : quelques secondes pour une image d'origine en 200 Mpixels=
.
Sous linux (sous Windows, c'est aussi simple), je lance la commande :
vips dzsave DSC_3064-DSC_3071.JPG dz
Elle me génère un répertoire DSC_3064-DSC_3071 avec toutes les tuiles=
de diverses dimensions et un fichier xml de description DSC_3064-DSC_3071.=
dzi.
Il faut ensuite préparer le serveur Web sur lequel vous allez déposer v=
os images.
Pour cela il faut récupérer le moteur openseadragon :
https://openseadragon.github.io/#download
et l'installer sur votre serveur :
https://openseadragon.github.io/docs/
Cela n'est à faire qu'une fois, bien évidemment.
On prépare ensuite le fichier html de présentation ; pour l'exemple que=
je présente, il contient :
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<title>Maroc - La grande traversée du Haut-Atlas - Juillet 2014 - aut=
our d'Iskataffen</title>
</head>
<body background="grey">
<div id="openseadragon1"></div>
<script src="../openseadragon/openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "../openseadragon/images/",
tileSources: "DSC_3064-DSC_3071.dzi",
navigatorSizeRatio: 1
});
</script>
</body>
Vous déposez alors votre fichier html sur votre serveur Web avec le fichi=
er dzi et le répertoire associé. Dans mon exemple j'ai donc à la fin =
:
Racine du site
|____openseadragon
|____Haut-Atlas 2014
|____DSC_3064-DSC_3071.html <== mon fichier de présentation
|____DSC_3064-DSC_3071.dzi <== mon fichier de description des tu=
iles
|____DSC_3064-DSC_3071 <== le répertoire avec les tuiles
C'est fini.
[trucs utiles]
C'est *très* intéressant, lu en diagonale ça semble compact mais
complet.
J'aimerais bien le retrouver /un jour/. Peut-être pourriez-vous en
tirer une page de blog, à moins que ce ne soit déjà fait ?
PS: de l'Apache (de OVH j'imagine). Est-ce ce qui est souhaité ?
--
Pierre Maurette
quand on zoome c'est plus de la bouillie de pixels que de la haute
résolution
c'est du 1100X680 environ, c'est plus que limite pour du HD,
effectivement ...........
Je n'ai pas encore géré cette partie. Je vais sûrement en profiter po ur y déposer l'explication que je donne dans ce forum. Cela complétera bien.
Merci pour le retour
Bonjour,
une fois de plus, on voit que l'offre crée la demande. Sur le fond, ça
me fait penser à NCIS : faudrait faire un essai avec une photo prise du
haut de la tour Eiffel.
Den
....
Merci.
Ce qui compte, ce n'est pas la définition de l'exemple, c'est la
méthode, parfaitement expliquée.
Parfait, j'avais un autre systeme du même genre mais le tien semble
mieux, plus intuitif
je vais essayer
Moi, c'etait, ça:
http://www.jpzero.com/zoom/voirbihit.htm
http://www.jpzero.com/zoom/voirepeire.htm
--
Etre libre, c'est n'avoir rien à perdre
+1, Den
+1
Merci.
--
Cordialement.
GG.
Bravo, merci
+1
--
"La théorie, c'est quand on sait tout et que rien ne fonctionne. La
pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Ici, nous avons réuni théorie et pratique : Rien ne fonctionne... et
personne ne sait pourquoi !" [ Albert Einstein ]