Skip to content Skip to sidebar Skip to footer
Home / Canvas / Html / Image / Refresh

How To Display A Constantly Changing Image File In A Browser Without Refresh Flicker?

Post a Comment
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'.

Solution 1:

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 = newImage();
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);
};

functiontimedRefresh() {
    // just change src attribute, will always trigger the onload callback
    img.src = imageURI + '?d=' + Date.now();
}

And then it should work.

Solution 2:

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><scripttype="text/JavaScript">var url = "cam1.php"; //url to load image fromvar refreshInterval = 1000; //in msvar drawDate = true; //draw date stringvar img;

functioninit() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    img = newImage();
    img.onload = function() {
        canvas.setAttribute("width", img.width)
        canvas.setAttribute("height", img.height)
        context.drawImage(this, 0, 0);
        if(drawDate) {
            var now = newDate();
            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();
}
functionrefresh()
{
    img.src = url + "?t=" + newDate().getTime();
    setTimeout("refresh()",refreshInterval);
}

</script><title>JavaScript Refresh Example</title></head><bodyonload="JavaScript:init();"><canvasid="canvas"/></body></html>

Solution 3:

I think you don't need to create the Image object every time in timedRefresh(). Just create one instance and constantly change its src attribute. In case of your code snippet, img would have to be global variable.

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

Post a Comment for "How To Display A Constantly Changing Image File In A Browser Without Refresh Flicker?"