Menu
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>
978
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.
147
Here a complete working example. Just configure url and refeshInterval. It uses Yannick's caching prevention and does not re-create the img object on every reload as suggested by 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
