Bild über URL-Eingabe im Browser aufrufen
0 
Matthias Apsel
0 0 0 
molily
Bild über URL-Eingabe im Browser aufrufen
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.
-
Om nah hoo pez nyeetz, klaushome!
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.
Doch, das geht.
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> iframe { border: 1px solid; height: 800px; width: 600px; } </style> </head> <body> <input id="input" type="url"> <button onclick="tausche_url()">URL anzeigen</button> <iframe id="iframe"></iframe> <script> function tausche_url() { document.getElementById('iframe').src = document.getElementById('input').value; } </script> </body> </html>Das Beispiel soll nur die Funktionsweise veranschaulichen.
Wichtig! Manche Leute mögen es nicht, wenn ihre Bilder auf diese Weise eingebunden werden.
Frohe Weihnachten
Matthias-
Danke Matthias. Zum Hintergrund: Wenn das Bild geladen ist, wird es im Browser analysiert und das Ergebnis ausgegeben. Der Analyseteil ist easy. Alles wird im Browser stattfinden. Man könnte das auch mit "Bild speichern unter" und dann mit "Datei öffnen" machen, aber das ist auf Tablets (iOS und Android) nervig. Danke nochmal.
-
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."
-
Hallo,
Ich möchte per Javascript die Bilddaten von einer externen/fremden Domain in den Speicher laden und dann per Javascript weiterverarbeiten.
Was verstehst du unter Weiterverarbeiten?
Du kannst Bilder von beliebigen fremden Domains laden, aber sobald du sie auf einen HTML5 2D-Canvas zeichnest, ist der Canvas tainted. Das heißt ein Auslesen und Manipulieren der Bilddaten per JavaScript ist nicht mehr möglich.
Eine andere Möglichkeit, mit JavaScript auf die Bilddaten zuzugreifen, ist mir nicht bekannt.
Grüße
Mathias-
Hallo molily. Ich möchte diese Funktionalität ausführen: http://www.tru-data-server.com/tru-data-check-deutsch.html. Statt dem "Bild öffnen Knopf" soll dann dort der "URL eingeben Knopf" sein. Danke.
-
Hallo,
es ist mit clientseitigem JavaScript nicht möglich, Bilder von beliebigen anderen Domains zu laden und sie z.B. mit FileReader als Bytestrom (ArrayBuffer) einzulesen, wie du es mit Dateien machst, die lokal mit <input type="file"> vom Benutzer gewählt werden. Dies ist eine Beschränkung der Same-Origin-Policy. Das ginge nur, wenn der andere Server per Access-Control-Allow-Origin sein Einverständnis gibt.
Ich fürchte, dein Vorhaben lässt sich so nicht umsetzen. Serverseitig wäre es natürlich viel einfacher möglich. Bedenke, dass du das Serverprogramm entsprechend absichern müsstest, denn es könnte zum Erzeugen von Requests auf fremde Server und zum Verarbeiten beliebiger Daten gebracht werden. Das ist ein potenzielles Sicherheitsrisiko.
Grüße,
Mathias-
Hi molily. Genau das sagt mein Programmierer auch. Und genau dafür suche ich eine Lösung ohne den Einsatz eines Servers. Danke fürs Mitdenken. Frohe Weihnachten.
-
Meine Herren,
Hi molily. Genau das sagt mein Programmierer auch. Und genau dafür suche ich eine Lösung ohne den Einsatz eines Servers.
Ich schließe mich deinem Programmierer und molily ebenfalls an und sage, dass es nicht ohne einen Server machbar ist. Was spricht denn gegen einen Web-Server? Als Alternative kannst du auch lokal einen Proxy installieren, der die CORS-Rechte einfach bei jeder Anfrage erteilt. Eine dritte Möglichkeit wäre, du schreibst statt einen puren Web-Anwendung eine Browser-Erweiterung. Browser Erweiterungen haben in vielen Punkten Sonderrechte, die Web-Anwendungen nicht erteilt bekommen.
-
-
-
-
-
-
-
