2016-11-12 3 views
2

Ich bin ziemlich mit Web-Technologie nicht vertraut.Aktualisieren Sie ein generiertes Bild

Eine Software, die eine Web-Server-Ausgabe ein dynamisches Bild auf dem lokalen Host bettet:

<img src="http://localhost:8000/" alt="http://localhost:8000/" class="transparent shrinkToFit" width="419" height="428"> 

Dieses Bild von der Software regelmäßig aktualisiert wird. Ich versuche, dieses Update im Webbrowser anzuzeigen. Es gibt mehrere verwandte Beiträge und ich habe zwei Lösungen ausprobiert, aber bisher ohne Glück.

Im Folgenden sind zwei Versuche von bestehenden Code inspiriert und beide fehlschlagen. Das Problem scheint mit einem Caching-Effekt zu tun zu haben, aber ich bin mir nicht sicher, wie ich das umgehen soll.

Vielen Dank im Voraus,

Trad

<html> 
    <head> 
    <title></title> 
    <meta content=""> 
    <style></style> 
    <!doctype html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" href="rsc/stylesheet.css" type="text/css" charset="utf-8" /> 
<!--  <script> 
        setInterval(function() { 
         var url = "http://localhost:8000";//document.getElementById("url").value; 
         var xhr = new XMLHttpRequest(); 
         xhr.open("GET",url); 
         xhr.responseType = "blob"; 
         xhr.onreadystatechange = function() { 
         if (xhr.readyState == xhr.DONE && xhr.status == 200) { // xhr.readyState == xhr.DONE && 
          // Render the downloaded image 
          var myblob = xhr.response; 
          var image = document.getElementById("ImageMusic"); 

          image.addEventListener("load", function (evt) { 
       URL.revokeObjectURL(evt.target.src); 
          }); 
      image.src = URL.createObjectURL(myblob); 
         } 
        } 
        xhr.send(null); 
        }, 100); 



     </script> 
--> 
       <script> 
        setInterval(function() { 
         var myImageElement = document.getElementById('ImageMusic'); 
         myImageElement.src = 'http://localhost:8000?rand=' + Math.random(); 
        }, 100); 
       </script> 
     <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script> 
    </head> 
    <body> 

     <a-scene> 
      <a-assets> 
       <img id="ImageMusic" src="http://localhost:8000" /> 
      </a-assets> 
      <a-image position="1 1 -4" width="4" height="4" src="#ImageMusic"></a-image> 
     </a-scene> 
    </body> 
</html> 
+0

Hope Setting Image * src * kann es wieder zwingen, wie * Iframe * zu aktualisieren tut – Abhi

Antwort

1

Es ist nicht möglich, eine Web-Seite als Bild oder Textur zu verwenden.

Im Kontext von A-Frame können Sie I-Frames auch nicht als Bild oder Textur verwenden, dies ist im Browser nicht möglich.

+0

Sagst du, dass diese Methode nicht funktioniert oder dass das, was ich versuche zu erreichen, nicht durchführbar ist (oder zumindest nicht geradlinig)? Ich habe heute einige weitere Experimente gemacht und den kommentierten Code, wo der setInterval tatsächlich auf einem normalen Bild arbeitet. Ich verstehe besser, was es jetzt macht, und ich habe versucht, es direkt auf dem A-Bild zu verwenden. Da es nur die src aktualisiert, dachte ich, es könnte sehr gut an einem generischen Objekt und auch im speziellen Fall eines a-Bildes arbeiten. Es hat nicht. Nicht genug vertraut mit Web-Entwicklung, um zu entscheiden, ob das erwartet wird oder nicht. –

+0

Interessanterweise wissen Sie von einer Möglichkeit, das Bild in a-Frame zu aktualisieren? –

1

Versuchen iframe <iframe src="http://localhost:8000/">Your browser does not support the iframe HTML tag</iframe> automatisch aktualisiert Dies sollte.

Alternativ können Sie den Tag <embed src="http://localhost:8000/"></embed> verwenden. Solange Sie eine festgelegte Pixelgröße für die Bilder haben (z. B. 1080x720), sollten Sie keine Probleme mit Scrollen oder gestreckten Bildern haben.

CSS:

embed { width:1080px; height: 720px; }

+0

Es scheint, dass diese beiden Elemente angezeigt werden sollen. Ich suche nach einer Lösung, die die Referenz aktualisiert, wenn die Anzeige durch ein anderes Objekt aus der A-Frame-Bibliothek passiert. Danke für die Antwort trotzdem. –

Verwandte Themen