2016-11-12 115 views
2

我對網絡技術相當陌生。刷新生成的圖像

嵌入web服務器的輸出動態圖像 本地主機上的軟件:

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

該圖像是由軟件定期更新。我正試圖在Web瀏覽器中顯示此更新。有幾個相關的帖子,我已經嘗試了兩種解決方案,但迄今沒有運氣。

下面是受現有代碼啓發的兩種嘗試,都失敗了。這個問題似乎與某些緩存效果有關,但我不知道如何解決這個問題。

由於提前,

<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

希望設置圖像* src *可能會強制它重新加載,如* iframe * – Abhi

回答

1

這是不可能使用一個網頁作爲圖像或紋理。

在A幀的上下文中,您不能將I-幀用作圖像或紋理,這在瀏覽器中是不可能的。

+0

你是說這種方法不起作用,或者我試圖實現的是不可行的(或者至少不是以一種簡單的方式)?我今天做了一些進一步的實驗,並且在setInterval實際上在普通圖像上工作的評論代碼。我現在對它做的更好,我試圖直接在A圖像上使用它。由於它只是更新src,我認爲它可以很好地處理通用對象,並且也適用於a-image的特定情況。它沒。對Web開發不夠熟悉以決定是否預期。 –

+0

更有趣的是,你知道一種方法來刷新幀中的圖像嗎? –

1

嘗試使用iframe的 <iframe src="http://localhost:8000/">Your browser does not support the iframe HTML tag</iframe> 這應該自動更新。可以使用<embed src="http://localhost:8000/"></embed>標籤。只要您爲圖像設置了像素大小(例如:1080x720),您就不應該在滾動或拉伸圖像時遇到任何問題。

CSS:

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

+0

看來這兩個元素是爲了顯示。我正在尋找一種解決方案,通過A幀庫中的另一個對象進行顯示,刷新參考。無論如何感謝您的答案。 –