Sehr großes JPG Bild (6GB) in Webseite einbinden

  • Hallo,


    ich bin dabei eine Insel mit einer Drohne "abzufotografieren". Ich steuere die Drohne mit DroneDeploy was aus 6660 Einzelbilder das fertige Bild generieren wird. Die Kleeblattförmige Insel wird dann im Bild an der breitesten Stelle jeweils 1,6 Millionen Pixel horizontal und 1,3 Vertikal groß sein.


    Das Bild wird geschätzte 6 GB groß sein.


    Das kann ich unmöglich "einfach so" einbinden. Da benötige ich irgend eine Methode um das Bild nur dann in den Bereichen "scharf zu machen" wo man reinzoomt. Nicht anders als es Google Earth macht.


    Kennt jemand ein Weg das darzustellen?

  • Ich bin gerade dabei ein Widget zu entwerfen wo man 360° Panoramen betrachten kann. LINK

    Ich denke aber eher du meinst ein Flat-Bild? Da bin ich auch dran, weis aber noch nicht ob das etwas wird. LINK

    Oder so? LINK


    Beachte bei deinem Vorhaben das die meisten Smartphones nur bis "8192 Pixel" Bildbreite darstellen.

    Deshalb wird es in dem Panorama-Player auch eine Variante Cube-Map geben die das Bild in Würfelflächen aufteilt, somit ist dann eine Bildbreite von "24576 Pixel" möglich.


    Ich bin mir nicht ganz sicher wie das aussehen soll.

    Dieses Skript kann eine Flat-Bild aus mehreren Einzelbildern darstellen. LINK

    Das sieht dann so aus. LINK

  • Hallo Mario,


    Danke für Deine Hilfe. Du hast mich auf den richtigen "Suchweg" gebracht. Ich bin über leaflet.zoomify schlussendlich bei Zoomify.com gelandet. Das macht was ich brauche und scheint einfach einzubinden. Außer das ich in meiner mit ZP hergestellten Seite es nicht hinbekomme.


    Auf https://www.corsita.com/test habe ich folgendes Beispiel:


    Das klappt einwandfrei.


    Setze ich diese beiden Zeilen unverändert in das Attribut additional_meta:


    Code
    <script type="text/javascript" src="ZoomifyImageViewerFree-min.js"></script>
    <script type="text/javascript"> Z.showImage("KohMakMap", "KohMak"); </script>


    und das hier unverändert als HTML Quelltext an der gewünschten Stelle:


    Code
     <div id="KohMakMap" style="width:900px; height:500px; margin:auto; border:1px; border-style:solid; border-color:#696969; background-color:#000000;" >


    Dann bekomme ich nur den Border in der gewünschten Größe zu sehen.


    Siehe hier: https://www.corsita.com/en/zoomify


    Garantiert eine Kleinigkeit die mein Unwissen hervorgerufen hat. Oder irgend ein Konflikt mit etwas was nicht erkennen kann.

  • Die Pfade zum Bilderordner und der JS sind falsch.

    Falls ich das Richtig verstehe liegen die Bilder ja in https://www.corsita.com/test/KohMak. Un die JS in https://www.corsita.com/test/


    Wenn du alles über ZP machen möchtest müsstest du den Bilderordner über "Dynamisch verknüpfte Ordner" einbinden und den Pfad dazu in <script type="text/javascript"> Z.showImage("KohMakMap", "KohMak"); </script> anpassen. Die JS am besten über "Erweitert > Dateien" hinzufügen, Und diese im Pfad einfach über die OID-Adresse einbinden.


    Was spricht dagegen das funktionierende einfach per "iFrame" einzubinden?


    PS: Ich würde da eher von Abstand nehmen, der Funktionsumfang am Smartphone lässt zu wünschen übrig.

  • Bitte auch die Browser-Konsole beachten. Da liegen Skriptfehler vor (ReferenceError: Can't find variable: Z). Diese an den Hersteller des Scripts melden.

  • Die Pfade zum Bilderordner und der JS sind falsch.

    Hallo Mario,


    die Pfade sind richtig, weil "test" tatsächlich ein "test.html" ist (und nicht ein Verzeichnis). Es liegt also alles direkt auf http://www.corsita.com


    Betreffend Funktionsumfang am Smartphone: das ist die free Version. Für 20 Dollar (einmalig) bekommst Du mehr.

  • Bitte auch die Browser-Konsole beachten. Da liegen Skriptfehler vor (ReferenceError: Can't find variable: Z). Diese an den Hersteller des Scripts melden.

    Habe den Fehler in der Browser Console nicht gesehen. Stelle halt nur fest, dass es mit www.corsita.com/test.html funktioniert und eingebettet in ZP auf https://www.corsita.com/en/zoomify wie beschrieben nicht. Vermutlich ist genau dieser Skriptfehler der Grund warum es innerhalb von ZP nicht tut. Irgend ein Konflikt?

  • Irgend ein Konflikt?

    Nein, aber auf beiden Seiten ist das Script jeweils mit relativer URL eingebunden.

    Und unter /en/ ist schlicht kein Script vorhanden.


    Site-Absolute (der Slash zu beginn) könnte es bei beiden funktionieren:

    <script type="text/javascript" src="/ZoomifyImageViewerFree-min.js"></script>

  • Ich habe jetzt das OpenSeadragon Tool auch mit Teilbildern getestet. BEISPIEL

    • Zuerst den "Deep Zoom Composer" von Microsoft heruntergeladen. LINK
    • Damit die Bilder zerpflückt, der erstellt über 600 Teilbilder in verschiedenen Auflösungen in 13 Ordnern.
    • Diese Bilderordner in einen Ordner auf den Server geladen. (Könnte man auch in ZP über "Dynamisch verknüpfte Ordner" einbinden. Hier ist aber wegen der vielen Dateien Geduld gefragt)
    • Da mir die Icons nicht gefallen habe ich diese Icons ebenfalls auf den Server geladen.
    • Anschließend unten stehenden Code über "Widget Quelltext" eingefügt.


    • Zeile 08 / der Ordner mit den Icons
    • Zeile 12 / der Ordner mit den Teilbildern
    • Zeile 15, 17 und 18 kannst du der XML-Datei entnehmen welche der "Deep Zoom Composer" mit ausgibt.



  • Es gibt jetzt dazu auch ein Widget für Zeta Producer. Dieses verwendet ebenso wie Zoomify das Open Source JS von OpenSeadragon.

    • Es können Einzelbilder ebenso wie Gigapixel-Bilder eingebunden werden.
    • Die Einzelbilder werden einfach im Widget als Datei hinzugefügt. Damit die Bilder auch auf Smartphones angezeigt werden ist die Bildbreite hier auf "8192 Pixel" beschränkt.
    • Die Gigapixel-Bilder werden mit der Freeware "Deep Zoom Composer" von Microsoft in sehr viele Einzelbilder mit verschiedenen Auflösungen zerlegt und und damit die Performance von ZP durch die vielen Dateien nicht beeinträchtigt wird mit einem FTP-Programm auf den Server geladen. Anschließend muss nur der Pfad zu dem Bilder-Ordner angegeben werden.

    Widget Zoom Bild

  • Hallo Mario,


    da hast Du Glück gehabt dass es klappt. Habe auch mit OpenSeadragon und Deep Zoom Compser geübt. Zu OpenSeadragon bin ich aber gar nicht gekommen weil der Deep Zoom Composer die Arbeit nach einer Weile mitten im Erstellen der Tiles abbricht mit "not a valid file". Egal welches Format ich nehme. Scheint mit der Größe des Bildes zu tun zu haben. Der jüngste Forum Eintrag den ich beim Googlen gefunden habe ist von 2010. Ältere von 2008. Das Problem hatten viele. Lösung gibt es nicht.


    Die anderen Wege die Tiles zu erstellen kosten viel Geld oder sind zu technisch für mich.


    Ich über derzeit mit HD View Utilities (auch von Microsoft). Da gibt es ein Commandline Tool was die Tiles erstellen kann (können soll).

  • Ich habe mir das gerade nochmal durch den Kopf gehen lassen.

    Es werden ja hier Teilbilder in einer Größe von ca. 256x256px erstellt, und das ganze in mehreren Auflösungen. Das habe ich mal überschlagen, da kämen bei deiner Bildgröße ca. 40.000.000 Bilder raus. Könnte mir vorstellen das da jedes Tool an seine Grenzen kommt.


    Ich würde das Bild in mehrere Teile aufteilen und für jedes dieser Teile ein Zoom-Bild erstellen. Das ganze dann in einer Image-Map verlinken. Zu Beispiel mit diesem Widget. LINK