Как отобразить постоянно изменяющийся файл изображения в браузере без мерцания обновления? - PullRequest
Новая
       16

Как отобразить постоянно изменяющийся файл изображения в браузере без мерцания обновления?

15 голосов
/ 26 марта 2011

Я отображаю изображение (из файла) в браузере, используя 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>

Ответы [ 3 ]

14 голосов
/ 26 марта 2011

Во-первых, когда вы устанавливаете атрибут 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);
};

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

И тогда должно получиться.

5 голосов
/ 13 мая 2015

Вот полный рабочий пример. Просто настройте url и refeshInterval. Он использует Yannick для предотвращения кэширования и не воссоздает объект img при каждой перезагрузке, как предложено 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>
1 голос
/ 25 июля 2012

Я думаю, вам не нужно каждый раз создавать объект Image в timedRefresh(). Просто создайте один экземпляр и постоянно меняйте его атрибут src. В случае вашего фрагмента кода, img должен быть глобальной переменной.

Основная проблема, однако, в том, что вы все равно увидите мерцание (но другого типа) в Opera. См .: Обновление источника изображения в JavaScript с Opera

...