¿Cómo mostrar un archivo de imagen en constante cambio en un navegador sin actualizar el parpadeo?

Estoy mostrando una imagen (desde un archivo) en el navegador usando html ... Tengo otro programa que sigue tomando una captura de pantalla de mi pantalla y la almacena como un archivo de imagen "image.jpeg". Estoy mostrando esta imagen en el navegador periódicamente usando setTimeout. Sin embargo, la imagen no está cambiando en el navegador ...¿Cómo mostrar un archivo de imagen en constante cambio en un navegador sin actualizar el parpadeo?

Aquí está mi código ... He utilizado un objeto de imagen para que se cargue una nueva imagen cada vez que se ejecuta la función javascript, pero parece que no funciona. ..

<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>

Fuente

2011-03-25 Craig

en primer lugar, cuando se establece el atributo src de su objeto de imagen, la imagen no se ha cargado todavía, es necesario refrescar la lona cuando el onload de la imagen es despedido (cuando la imagen se hace cargando).

En segundo lugar, el navegador intenta utilizar la imagen en caché image.jpeg. Para evitar eso, agregue un argumento falso al URI de la imagen.

Por ejemplo:

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

Y entonces debería funcionar.

Fuente

2011-03-25 22:11:13

... Gracias funciona muy bien ahora :) – Craig

que es una idea brillante para utilizar una propiedad falsa con el fin de evitar el uso de una imagen almacenada en caché. –

Creo que no es necesario crear el objeto Image cada vez en timedRefresh(). Simplemente cree una instancia y cambie constantemente su atributo src. En el caso de su fragmento de código, img debería ser una variable global.

El principal problema, sin embargo, es que todavía verá parpadeo (pero de diferente tipo) en Opera. Ver: Image source update in JavaScript with Opera

Fuente

2012-07-25 07:50:44

Aquí un ejemplo completo de trabajo. Simplemente configure url y refeshInterval. Utiliza la prevención de almacenamiento en caché de Yannick y no vuelve a crear el objeto img en cada recarga como lo sugiere 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>

Fuente

2015-05-13 08:42:46

¡Usar el elemento canvas realmente reduce el parpadeo! – alfadog67

¿Cómo mostrar un archivo de imagen en constante cambio en un navegador sin actualizar el parpadeo?

Respuesta

Cuestiones relacionadas