如何在不刷新閃爍的情況下在瀏覽器中顯示不斷變化的圖像文件？

我在瀏覽器中使用HTML顯示圖像（從文件）...我有另一個程序，以保持我的屏幕截圖，並把它作爲一個圖像文件「image.jpeg」。我使用setTimeout定期在瀏覽器上顯示此圖像。然而，圖像不改變瀏覽器..如何在不刷新閃爍的情況下在瀏覽器中顯示不斷變化的圖像文件？

這裏是我的代碼...我用這樣一個新的映像加載每次的JavaScript函數運行一個Image對象，但似乎並不奏效。 ..

<html> 

<head> 

<script type="text/JavaScript"> 

var x=0, y=0; 
var canvas, context, img; 

function timedRefresh(timeoutPeriod) 
{ 
    canvas = document.getElementById("x"); 
    context = canvas.getContext("2d"); 
    img = new Image(); 
    img.src = "image.jpeg"; 
    context.drawImage(img, x, y); 
    x+=20; y+=20; 
    //img.destroy(); 
    setTimeout("timedRefresh(1000)",timeoutPeriod); 
} 

</script> 

<title>JavaScript Refresh Example</title> 

</head> 

<body onload="JavaScript:timedRefresh(1000);"> 

<canvas id="x" width="600" height="600" /> 

</body> 
</html>

來源

2011-03-25 Craig

首先，當您設置圖像對象的屬性src，圖像尚未加載，你需要刷新你的畫布時，圖像的onload被炒魷魚（當圖像完成加載）。

其次，瀏覽器嘗試使用緩存的圖像image.jpeg。爲了避免這種情況，請在圖像URI中添加一個僞造的參數。

例如：

var timeoutPeriod = 1000; 
var imageURI = 'image.jpeg'; 
var x=0, y=0; 
var img = new Image(); 
img.onload = function() { 
    var canvas = document.getElementById("x"); 
    var context = canvas.getContext("2d"); 

    context.drawImage(img, x, y); 
    x+=20; y+=20; 
    setTimeout(timedRefresh,timeoutPeriod); 
}; 

function timedRefresh() { 
    // just change src attribute, will always trigger the onload callback 
    img.src = imageURI + '?d=' + Date.now(); 
}

然後它應該工作。

來源

2011-03-25 22:11:13

...感謝偉大的作品現在:) – Craig 2011-03-27 12:50:27

這是一個絕妙的主意使用僞造的財產，以防止使用緩存圖像。 – 2014-08-28 22:02:33

我覺得你並不需要創建Image對象每次在timedRefresh()。只需創建一個實例並不斷更改其src屬性。在你的代碼片段中，img必須是全局變量。

但是，主要的問題是你仍然會在Opera中看到閃爍（但類型不同）。請參閱：Image source update in JavaScript with Opera

來源

2012-07-25 07:50:44

這裏一個完整的工作示例。只需配置url和refeshInterval即可。它採用Yannick的緩存預防和每reload不重新創建img對象通過Piotr的建議。

<html> 
<head> 
<script type="text/JavaScript"> 
var url = "cam1.php"; //url to load image from 
var refreshInterval = 1000; //in ms 
var drawDate = true; //draw date string 
var img; 

function init() { 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    img = new Image(); 
    img.onload = function() { 
     canvas.setAttribute("width", img.width) 
     canvas.setAttribute("height", img.height) 
     context.drawImage(this, 0, 0); 
     if(drawDate) { 
      var now = new Date(); 
      var text = now.toLocaleDateString() + " " + now.toLocaleTimeString(); 
      var maxWidth = 100; 
      var x = img.width-10-maxWidth; 
      var y = img.height-10; 
      context.strokeStyle = 'black'; 
      context.lineWidth = 2; 
      context.strokeText(text, x, y, maxWidth); 
      context.fillStyle = 'white'; 
      context.fillText(text, x, y, maxWidth); 
     } 
    }; 
    refresh(); 
} 
function refresh() 
{ 
    img.src = url + "?t=" + new Date().getTime(); 
    setTimeout("refresh()",refreshInterval); 
} 

</script> 
<title>JavaScript Refresh Example</title> 
</head> 

<body onload="JavaScript:init();"> 
<canvas id="canvas"/> 
</body> 
</html>

來源

2015-05-13 08:42:46

使用畫布元素真的減少了閃爍！ – alfadog67 2015-05-19 22:43:39

如何在不刷新閃爍的情況下在瀏覽器中顯示不斷變化的圖像文件？

回答

相關問題