Gigapixelbilder werden nicht als eine große Bilddatei, sondern als Pyramide von kleineren Kacheln übertragen. Hierbei werden die Kacheln mit mehreren Vergrößerungsstufen auf dem Webserver gespeichert.
Auf der Webseite schaffmeister.com verwende ich OpenSeaDragon zur Darstellung der Gigapixelbilder.
OpenSeaDragon kann hier geladen werden: https://openseadragon.github.io/
Das Installieren ist relativ einfach: Entpacken Sie den Download und kopieren den Ordner openseadragon mittels FTP in das Root-Verzeichnis ihres Webservers.
Der Aufruf eines Gigapixel-Fotos erfolgt dann in der html-Datei mit
<div id="openseadragon1" style="width: 800px; height: 600px;"></div><script src="/openseadragon/openseadragon.min.js"></script><script type="text/javascript"> var viewer = OpenSeadragon({ id: "openseadragon1", prefixUrl: "/openseadragon/images/", tileSources: "/path/to/my/demo.dzi" });</script>
Step by Step Erklärung:
<div id="openseadragon1" style="width: 800px; height: 600px;"></div>
<div id="openseadragon1"></div> In diesem Container wird das Bild dargestellt. Da es möglich ist mehrere Bilder auf einer Seite darzustellen ist id der Hinweis welches Bild darstellt werden soll. Der Name "openseadragon1" ist nicht bindend, es kann jeder beliebige Name genutzt werden.
style="width: 800px; height: 600px;" Mit style wird die Größe des Containers auf der Webseite angegeben. Fehlt die Angabe dann wird das Gigapixelbild nicht angezeigt.
<script src="/openseadragon/openseadragon.min.js"></script> Hiermit wird das OpenSeaDragon-Script aufgerufen. Die Pfadangabe geht vom Root-Verzeichnis des Webspace aus. Haben Sie die Dateien in ein anderes Verzeichnis gelegt, dann müssen Sie dieses hier eintragen.
<script type="text/javascript">var viewer = OpenSeadragon({id: "openseadragon1",prefixUrl: "/openseadragon/images/",tileSources: "/path/to/my/demo.dzi"});</script> Über dieses Script wird die Darstellung des Bildes auf ihrer Webseite gesteuert. Unter id gegeben sie an in welchem DIV-Container das Bild darstellt werden soll. prefixUrl ist nur dann anzupassen wenn Sie OpenSeaDragon in einen anderen Ordner installiert habe. In diesem Ordner befinden sich die Symbole die der Viewer nutzt (auf keinen Fall sollten sie hier ihre Gigapixelbilder speichern). Zuguterletzt müssen sie noch angeben wo ihr *.dzi des Gigapixel-Bildes gespeichert ist. Der Pfad tileSources beginnt im Root des Webservers. Haben Sie z. B. ihr Bild unter dem Namen Pano1 in dem Ordner bilder/Panorama gespeichert dann lautet der Pfad "/bilder/Panorama/Pano1.dzi"
Was ist ein *.dzi und wie erzeuge ich dieses?
dzi steht für Deep Zoom Image. Das Format wurde von Microsoft entwickelt um große Bilder effektiv zu übertragen und darzustellen. Ein Bild wird hierbei in eine Pyramide von Kacheln unterteilt. Die Spitze der Pyramide enthält die Übersicht, die Basis die 1:1 Darstellung. Dazwischen gibt es in der Pyramide mehrere Zoomstufen. Wenn Sie in ein Gigapixelbild zoomen dann bewegen Sie sich bildlich gesprochen von der Spitze in Richtung Basis.
Weitere Infos: https://www.microsoft.com/silverlight/deep-zoom/ https://en.wikipedia.org/wiki/Deep_Zoom
Um ein Gigapixel-Bild in eine dzi Pyramide zu verwandeln braucht man weiteres Programm. Unter Windows nutze ich hierzu vips. Das Progamm gibt es hier als Download: https://www.libvips.org/API/current/Making-image-pyramids.html
Im Eingabeaufforderungsfenster gibt man folgendes ein:
D:\vips\bin\vips.exe dzsave F:/Pano.tif F:/demo
D:\vips\bin\vips.exe Der Pfad zur exe-Datei von vips.
dzsave ist der Befehl aus einem Gigapixelbild eine Bildpyramide zu machen.
F:/Pano.tif ist der Pfad zum Gigapixelbild
F:/demo ist der Pfad und Name der dzi Dateien. In diesem Beispiel wird direkt auf Laufwerk F die Datei demo.dzi und der Ordner demo_files erzeugt.
Demo.dzi und der Ordner demo_files müssen dann noch zur Webseite transferiert werden.
Über die Befehlserweiterung --suffix kann man angeben das die Kacheln im jpg Format mit dem Qualitätsfaktor 80 erzeugt werden sollen.
D:\vips\bin\vips.exe dzsave F:/Pano.tif F:/demo --suffix .jpg[Q=80]