如何在不刷新闪烁的情况下在浏览器中显示不断变化的图像文件？

我在浏览器中使用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

如何在不刷新闪烁的情况下在浏览器中显示不断变化的图像文件？

回答

相关问题