Panorama w/ Leaflet

English version.

Hier zeige ich wie man Giga-Panoramas im Web einfach und (mehr oder weniger) schnell darstellen kann. Hierfür nutze ich Leaflet. Dabei handelt es sich um ein Java Script, das sich wirklich leicht in eine Website implementieren lässt.

Bilder & Verarbeitung

Das erste Panorama, das ich fürs Web optimiert habe zeigt die Landschaft meiner Heimatstadt. Man braucht nur knapp 30 Minuten lang bergauf zu gehen und schon befindet man sich in einer wesentlich idyllischeren Umgebung. Das Bild war von Anfang an als „Testbild“ gedacht. Ich habe nicht auf den besten Ausschnitt oder die höchste Schärfe geachtet, sondern ich wollte einfach eine nette Basis für das Online-Pano.
.
Ich habe die Kamera ohne Stativ (es lag zuhause) im Hochformat gehalten und sechs Bilder gemacht. Dabei habe ich darauf geachtet, dasss sich alle Folgebilder zu gut 40% überlappten. Das ist wichtig für die spätere Nachbearbeitung.
.
Nach einer kurzen Bearbeitung (Helligkeit, Kontrast, Schärfe) aller RAW-Bilder und deren Konvertierung ins jpg-Format habe ich das Bild in Photoshop von Photomerge zusammensetzen lassen. Danach folgte die Farbanpassung im gesamten Bild, da dies wesentlich einfacher ist, wenn man das Bild als ganzes betrachtet. Hier habe ich ebenfalls nur sehr wenig verändert, etwa das sehr dominate Blau etwas abgeschwächt und mit etwas Magenta vermischt.
.
Eine kleine Anmerkung zum Stitchen der Bilder: Ich habe erst nachdem das Bild fertig und online war einen anderen Editor entdeckt, mit welchem das Mergen sehr viel besser funktioniert. Es handelt sich um den ICE (Image Composite Editor) von Microsoft. Er ist kostenlos und lässt sich zudem sehr angenehm bedienen. Außerdem stimmen die Resultate.
.
ice
.

Als letzten Schritt, bevor wir zum Script kommen, muss man das Bild „zerhacken“. Dabei wird das Bid in unterschiedlichen Zoomebenen in 256×256 Pixel große Quadrate zerlegt und gespeichert. Jede Zoomebene erhält ihre eigene Nummer, und die Position des Teilbildes in der Ebene wird mit X-Y-Koordinaten festgelegt. Hierzu eine kleine Beschreibung:

Zoomlevel 0, die Koordinaten des Bildes sind X=0 und Y=0, also heißt die Datei 0-0-0.jpg.

zoom0.jpg

Zoomlevel 1, die Koordinaten des Bildes 1 sind X=0 und Y=0 und jene von Bild 2 sind X=1 und Y=0, also heißen die Dateien 1-0-0.jpg und 1-1-0.jpg.

zoom1.jpg

Warum macht man das? Das gesamte Bild auf einer Website zu laden würde viel zu lange dauern. Deshalb lädt man immer nur die Anteile des Bildes, die auch tatsächlich gebraucht werden – auf den Bildschrim passen. Lässt man sich das Bild in die Ansicht einpassen, so sieht man nicht das tatsächliche Panorama mit (hier) 15000×8000 Pixel, sondern nur mit ungefähr der momentanen Bildschirmauflösung.

Wie macht man das? Eine gute Lösung ist Zoomify. Wer mit Photoshop arbeitet, der hat das Glück, dass im Export Zoomify unterstützt wird. Die exportierten Bilder werden in Ordnern mit maximal 256 Bildern gespeichert, ehe ein neuer Ordner angelegt wird. Diese Ordner lädt man dann auf den Webserver und verweist im Java Script darauf.

Leaflet

Auf GitHub findet man das nötige Script, sowie ein kleines Beispiel-html-File.

In Zeile 21 des panorama.html Files gibt man den Link zum eigenen js-File an und in Zeile 26 folgt der Link zum Ordner, welcher die Ordern der Tiles beinhaltet.

Das js-File kommt natürlich in den js-Ordner am Webserver. Hier darf man dann den Link nicht vergessen!

Das Resultat

Alles zusammen sieht dann so aus:

http://www.deloarts.com/de/photography/first_pano/

WordPress unterstützt hier aufgrund der Sicherheitsrichtlinien leider keine iFrames. Deshalb muss man separat auf den Link klicken. Hier kann man den Eintrag Flawless betrachten.

Bilddaten
  • Kamera: Canon EOS 650D
  • Blende: f/8
  • Belichtungsdauer: 1/320 Sek.
  • Filmempfindlichkeit: ISO-100
  • Objekitv: Canon 18-200mm
  • Brennweite: 50mm
Advertisements

Ein Gedanke zu “Panorama w/ Leaflet

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s