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.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Pierre Maurette
Le #26329819
Stephan Peccini :
Bonjour,


[trucs utiles]
C'est fini.



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
Zorglub
Le #26329833
Le 18/12/2014 04:49, Stephan Peccini a écrit :
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.



quand on zoome c'est plus de la bouillie de pixels que de la haute
résolution
Jacques
Le #26329832
"Zorglub" 549284b8$0$2134$
Le 18/12/2014 04:49, Stephan Peccini a écrit :
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.



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 ...........
Stephan Peccini
Le #26329842
Le jeudi 18 décembre 2014 05:31:40 UTC+1, Pierre Maurette a écrit :

PS: de l'Apache (de OVH j'imagine). Est-ce ce qui est souhaité ?



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
Den
Le #26329841
Jacques wrote:
"Zorglub" 549284b8$0$2134$
Le 18/12/2014 04:49, Stephan Peccini a écrit :
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.



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




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
GhostRaider
Le #26329855
Le 18/12/2014 04:49, Stephan Peccini a écrit :
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 quelques temps, ce service ne permet plus de soumettre de nouvelles demandes.

Je me suis donc retourné vers la solution openseadragon (ouverture du code 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.


....
C'est fini.



Merci.
Ce qui compte, ce n'est pas la définition de l'exemple, c'est la
méthode, parfaitement expliquée.
Solanar
Le #26329860
Stephan Peccini avait soumis l'idée :
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 quelques
temps, ce service ne permet plus de soumettre de nouvelles demandes.

Je me suis donc retourné vers la solution openseadragon (ouverture du code 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ésolution
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 grande 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 vos
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">
<title>Maroc - La grande traversée du Haut-Atlas - Juillet 2014 - autour
d'Iskataffen</title> </head>

<body background="grey">

<div id="openseadragon1"></div>

<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 fichier
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 tuiles
|____DSC_3064-DSC_3071 <== le répertoire avec les tuiles

C'est fini.



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
Den
Le #26329882
GhostRaider wrote:

Merci.
Ce qui compte, ce n'est pas la définition de l'exemple, c'est la
méthode, parfaitement expliquée.




+1, Den
GG
Le #26329969
Den a écrit :
GhostRaider wrote:

Merci.
Ce qui compte, ce n'est pas la définition de l'exemple, c'est la méthode,
parfaitement expliquée.




+1, Den



+1
Merci.

--
Cordialement.
GG.
benoit
Le #26329987
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
quelques temps, ce service ne permet plus de soumettre de nouvelles
demandes.
[...]
C'est fini.



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 ]
Publicité
Poster une réponse
Anonyme