Html 如何在浏览器中显示不断变化的图像文件而不会出现刷新闪烁？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5438612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a constantly changing image file in a browser without refresh flicker?
提问by Craig
I'm displaying an image (from a file) on the browser using html... I have another program that keeps taking a screenshot of my screen and storing it as an image file "image.jpeg". I am displaying this image on the browser periodically using setTimeout. However the image is not changing on the browser..
我正在使用 html 在浏览器上显示图像（来自文件）......我有另一个程序可以不断截取我的屏幕并将其存储为图像文件“image.jpeg”。我使用 setTimeout 定期在浏览器上显示此图像。但是图像在浏览器上没有改变..
Here is my code... I have used an Image object so that a new image is loaded everytime the javascript function runs, however that does not seem to be working...
这是我的代码......我使用了一个 Image 对象，以便每次运行 javascript 函数时都会加载一个新图像，但是这似乎不起作用......
<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>
采纳答案by Yanick Rochon
First, when you set the srcattribute of your image object, the image has not been loaded yet, you need to refresh your canvas when the onloadof the image gets fired (when the image is done loading).
首先，当您设置src图像对象的属性时，图像尚未加载，您需要onload在图像被触发时（图像加载完成后）刷新画布。
Secondly, the browser tries to use the cached image image.jpeg. To avoid that, add a bogus argument to the image URI.
其次，浏览器尝试使用缓存的图像image.jpeg。为避免这种情况，请向图像 URI 添加一个虚假参数。
For example :
例如 ：
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();
}
And then it should work.
然后它应该工作。
回答by Hyman Miller
Here a complete working example. Just configure urland refeshInterval. It uses Yannick's caching prevention and does not re-create the imgobject on every reload as suggested by Piotr.
这是一个完整的工作示例。只需配置url和refeshInterval。它使用Yannick的缓存预防，并且不会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>
回答by Piotr Domagalski
I think you don't need to create the Image object every time in timedRefresh(). Just create one instance and constantly change its srcattribute. In case of your code snippet, imgwould have to be global variable.
我认为您不需要每次都在timedRefresh(). 只需创建一个实例并不断更改其src属性。如果是您的代码片段，img则必须是全局变量。
The main problem, though, is that you will still see flickering (but of different kind) in Opera. See: Image source update in JavaScript with Opera
但是，主要问题是您仍然会在 Opera 中看到闪烁（但种类不同）。请参阅：使用 Opera 在 JavaScript 中更新图像源
