自动刷新HTML画布图片不起作用

对于我的网站，我需要重新绘制服务器上不断更新的图片。我找到了解决方案并尝试了，但仍然没有自动刷新。我也尝试添加一个虚拟字符串到我的图像（local0.jpg），以便浏览器不使用缓存的图像，但没有成功。我究竟做错了什么？自动刷新HTML画布图片不起作用

<html> 
<head> 
<meta charset="utf-8"> 
</head> 
<body> 
<canvas id="canvas" width="400" height="400"> </canvas> 
<script> 
var imageObj=new Image(); 
imageObj.src="local0.jpg?dummy=8484744" 
imageObj.onload=function() 
{ 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 
    ctx.drawImage(imageObj,0, 0,canvas.width,canvas.height); 
    setTimeout(timedRefresh,1000); 
} 
function timedRefresh() 
{ 
    imageObj.src = "local0.jpg?dummy=8484749" 
} 
</script> 
</body> 
</html>

来源

2016-12-29 Shivam Mishra

您需要您设置源 – mplungjan

试试下面的代码

var imageObj = new Image(); 
imageObj.onload = function() { 
    drawOnCanvas(); 
    setTimeout(timedRefresh, 1000); 
    } 
    // set src AFTER assigning load 
imageObj.src = "local0.jpg?dummy=" + Math.random(); 

function timedRefresh() { 
    imageObj.src = "local0.jpg?dummy=" + Math.random(); 
    //drawOnCanvas(); //flicker was due this line as it try to draw image load so i commented it... now it should work... 
} 

function drawOnCanvas() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); 
}

来源

2016-12-29 07:25:06 spankajd

它的工作原理，但定义的onload有没有办法做到这一点没有闪烁？非常感谢。 –

你的函数timedRefresh添加随机值图像

function timedRefresh() 
{ 
    imageObj.src = "local0.jpg?dummy=" + Math.floor((Math.random() * 10000) + 1); 
}

来源

2016-12-29 07:23:33 azad

自动刷新HTML画布图片不起作用

回答

相关问题