URL zu Bilddatei eingeben, aufrufen und Bild anzeigen

[birdieanimal]

Hi,

ich möchte bitte in einem Eingabefeld eine URL zu einem Bild (z.B. "http://www.domain.de/foto.jpg") eingeben und dann soll dieses Bild geladen und angezeigt werden. Klingt irgendwie super einfach, aber die Leute, die ich gefragt habe, sagen, das geht nicht ohne das Bild auf einen Server zu laden. Ich möchte aber, dass alles nur im Browser des Users stattfindet.

Danke für jede mögliche Hilfe.

 

[Darkman]

Damit jemand ein Bild aufrufen kann, muss es doch irgendwie erreichbar gemacht werden. Also muss es auf irgendeinem Server liegen... oder wie stellst DU Dir das vor? Man kann ja nicht über eine Url auf deinen lokale Bildersammlung zugreifen.

 

[birdieanimal]

Ja, das Bild liegt auf einem Webserver (so wie der Beispiellink). Nun soll per URL-Eingabe im jeweiligen Browser angeziegt werden. Wenn es dort einmal angekommen ist, wird es im Browser analysiert. Der Analyseteil ist easy, nur wie kriege ich das Bild geladen.? Ich möcht NICHT, dass die Analyse serverseitig (also ein weiterer Server) stattfindet. Alles soll im Browser stattfinden. Danke nochmal.

 

[Tronjer]

Was bitte wird denn an einem Bild analysiert?

 

[Darkman]

Hä!? Was hast Du vor? Das Bild wird im Browser angezeigt, wenn man die URL direkt ansurft. Was möchtest Du mehr?

 

[birdieanimal]

Tronjer: Schau mal hier: http://www.tru-data-server.com/tru-data-check-deutsch.html. Dieser Prozess soll auch auf iOS und Androids funktionieren. Dafür darf das Bild nicht auf dem Gerät gespeichert werden.

Darkman: Es muss per Script aufgerufen werden, damit die Analyse funktioniert.

 

[birdieanimal]

Ergänzung: Die Frage muss wohl so lauten: "Ich möchte per Javascript die Bilddaten von einer externen/fremden Domain in den Speicher laden und dann per Javascript weiterverarbeiten."

 

[Tronjer]

Ergänzung: Die Frage muss wohl so lauten: "Ich möchte per Javascript die Bilddaten von einer externen/fremden Domain in den Speicher laden und dann per Javascript weiterverarbeiten."

Verstehe ich das richtig: Du suchst nach einem Script, welches von fremden Domains selbständig Bilder lädt und diese auf "Wasserzeichen" untersucht? Das klingt irgendwie übel nach Abmahngeschäft.

 

[birdieanimal]

Tronjer: Nein: Der User schreibt die URL in das Eingabefeld und das passiert es mit genau diesem Bild. Nichts ist automatisiert. Der User könnte auch auf der Website des Bildes "speichern unter" sagen und dann auf http://www.tru-data-server.com/tru-data-check-deutsch.html dieses Bild wieder laden. Außerdem dieser Prozess von Bildinhaber so gewünscht. Es passeirt also mit dem Einverständis der fremden Website. Damit das aber auch auch Tablets und Smartphone funktioniert, muss es über den Aufruf der Bild-URL passieren.

 

[Tronjer]

Technisch gesehen wären dazu zwei Schritte notwendig. Erstens müsste bei der Aufnahme des Bildes eine Art Fingerprint erzeugt werden. Sei es in Form von Metadaten oder steganografisch eingebettetem Code. Im Anschluss könnte ein Programm innerhalb des Bildes nach diesem Code suchen.

Der zweite Schritt ließe sich wahrscheinlich auch per JS bewerkstelligen. Es gibt zumindest entsprechende Libraries, die Metadaten auslesen können. Aber wonach soll gesucht werden, bzw. wie willst du den ersten Schritt umsetzen? Die von dir gepostete App kann das, weil sie sich beim Fotografieren einklinkt und Zugriff auf Gerätefunktionen hat.

 

[birdieanimal]

Tronjer: Diese beiden Schritte sind mir klar. Die gepostete App ist von mir. Es stellt sich nur die Aufgabe "Ich möchte per Javascript die Bilddaten von einer externen/fremden Domain in den Speicher laden und dann per Javascript weiterverarbeiten." Es geht also nur um das Laden eines Bilder von einer URL per JS. Der Rest ist dann easy. Übrigens: Frohe Weihnachten !

 

[Tronjer]

Ich möchte per Javascript die Bilddaten von einer externen/fremden Domain in den Speicher laden und dann per Javascript weiterverarbeiten

Um ein Bild als base64-encoded String in den Speicher zu laden, gibt es die File API. Content von einem externen Server zu laden, ist aufgrund der Same-Origin Policy von JavaScript jedoch nur bedingt möglich. Beispielsweise durch einen Cross-Origin Request per Ajax. Dazu muss der Server allerdings einen entsprechenden Response Header senden.