Hello la team,

Je suis sur un projet de TimeLapse sur un site web. J'ai acheté une webcam qui récupère les images toutes les 5 min.

Je souhaite parcourir avec JS le répertoire où sont stockés ces images et les afficher à la suite toutes les x millisecondes.

J'ai trouvé un script qui marche super, mais où le nom des images est écrit en dur. Je souhaite donc les récupérer en dynamique (le nom des images contient la date : 20190619-144653.jpg (date-heure.jpg).

<img src="images/20190617-070153.jpg" width="620" height="400" id="imagemain" />

<SCRIPT language="JavaScript" type="text/javascript">

// Un tableau qui va contenir toutes tes images.
var images = new Array();

images.push("images/20190617-070153.jpg");
images.push("images/20190617-070653.jpg");
images.push("images/20190617-071153.jpg");
images.push("images/20190617-071653.jpg");
images.push("images/20190617-072153.jpg");
images.push("images/20190617-072653.jpg");


var pointeur = 0;

function ChangerImage(){
document.getElementById("imagemain").src = images[pointeur];

if(pointeur < images.length - 1){
pointeur++;
}
else{
pointeur = 0;
}

setTimeout("ChangerImage()", 100)
}

// Charge la fonction
window.onload = function(){
ChangerImage();
}
</SCRIPT>

Je cherche donc à ne pas mettre les images en dur mais à faire une boucle qui va insérer dans l'Array les images de la veille. (faut donc manipuler les dates...)

Merci pour votre aide.

Bonjour,

Pourquoi pas utiliser la fonction glob de PHP ?

$directory = glob('images/*');
// Boucle pour lister le nom des fichiers
foreach($directory as $name){
echo 'images.push("'.$name.'");';
}

Ce qui va nous donner :

<img src="images/20190617-070153.jpg" width="620" height="400" id="imagemain" />
 
<SCRIPT language="JavaScript" type="text/javascript">
 
// Un tableau qui va contenir toutes tes images.
var images = new Array();
 
<?php 
$directory = glob('images/*');
// Boucle pour lister le nom des fichiers
foreach($directory as $name){
echo 'images.push("'.$name.'");';
}
?>
 
 
var pointeur = 0;
 
function ChangerImage(){
document.getElementById("imagemain").src = images[pointeur];
 
if(pointeur < images.length - 1){
pointeur++;
}
else{
pointeur = 0;
}
 
setTimeout("ChangerImage()", 100)
}
 
// Charge la fonction
window.onload = function(){
ChangerImage();
}
</SCRIPT>

J’espère que ça va vous aider.

-
Edité par Radiodev 1 décembre 2019 à 6:39:32