我使用html在浏览器上显示一个图像(从一个文件)…我有另一个程序,不断拍摄我的屏幕截图,并将其存储为一个图像文件“image.jpeg”.我使用setTimeout定期在浏览器上显示此图像.但是图像在浏览器上没有变化
这是我的代码…我使用了一个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>
解决方法
首先,当您设置图像对象的src属性时,图像尚未加载,当图像的加载被触发时(当图像完成加载)时,需要刷新画布.
其次,浏览器尝试使用缓存的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,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();
}
然后它应该工作.
