如何在浏览器中显示不断变化的图像文件而不刷新闪烁？ [英] How to display a constantly changing image file in a browser without refresh flicker?
问题描述
我使用html在浏览器上显示图像（来自文件）...我有另一个程序不断拍摄屏幕截图并将其存储为图像文件image.jpeg。我使用setTimeout定期在浏览器上显示此图像。然而，图像在浏览器上没有改变。
这是我的代码...我已经使用了一个Image对象，以便每次使用javascript函数加载一个新图像运行，但似乎并没有工作......
< html>
< head>
< script type =text / JavaScript>
var x = 0，y = 0;
var canvas，context，img;
函数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刷新示例< / title>
< / head>
< body onload =JavaScript：timedRefresh（1000）;>
< canvas id =xwidth =600height =600/>
< / body>
< / html>
首先，当您设置图像对象的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）;
};
函数timedRefresh（）{
//只是改变src属性，总会触发onload回调
img.src = imageURI +'？d ='+ Date.now ）;
}
然后就可以了。
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..
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...
<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>
First, when you set the src attribute of your image object, the image has not been loaded yet, you need to refresh your canvas when the onload of the image gets fired (when the image is done loading).
Secondly, the browser tries to use the cached image image.jpeg. To avoid that, add a bogus argument to the image 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.
这篇关于如何在浏览器中显示不断变化的图像文件而不刷新闪烁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
