Tableau rempli d'images

Sujet résolu

28 mai 2017 à 14:45:45

Bonjour à tous,

J'aimerais savoir si il est possible de placer plus images dans un tableau (en Javascript), et de faire appel a ce tableau dans un canvas afin d'en faire un slide ?

J'utilises la librairie Konva.min.js, mais j'essaie tout d'abord de créer un tableau avec toutes mes images (qui composeront donc mes slides).

Est-il possible d'automatiser l'insertion des images dans le tableau, ou est-ce que je dois les entrer les manuellement ?

Merci de vos réponses ;)

Futur Guru CyberSécurité !

Arthur222

28 mai 2017 à 16:26:48

Tu peux leur donner le même nom avec un chiffre qui change (monImage-0.png, monImage-1.png), mettre le nombre d'images dans le javascript, les charger et appeler la fonction callback pour les afficher une fois que la dernière image a bien été chargée :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style>
</style>
</head>
<body>
  <canvas id="ca">canvas pas supporté par navigateur</canvas>
  <script>
  var ca = document.getElementById("ca");
  var ctx = ca.getContext("2d");
  var nombreDimages = 2;
  var images = [];
  var loadCount = 0;

  getFiles();
  charger(demarrer);

  function getFiles(){
    for (var i=0; i < nombreDimages; i++){
      var image = new Image();
      image.src = "monImage-"+i+".png";//dans le même dossier que ce fichier html
      images[i] = image;
      console.log("ima : "+images[i]);
    }
  }
  function charger(callback){
    for (let i=0; i<nombreDimages; i++){
      images[i].onload = function(){ //on utilise onload pour les pré-charger
        console.log(i+" loadé!");
        loadCount++;
        if ( loadCount == nombreDimages ) callback(); //on appelle notre fonction, ici demarrer
      }
    }
  }
  function demarrer(){
    console.log("demarrer");
    ctx.drawImage(images[0], 0,0); //elles ont déjà été préchargées, on les affiche dans le canvas
    ctx.drawImage(images[1], 10,10)
  }
  </script>
</body>
  
</html>
</body>
</html>

-
Edité par Arthur222 28 mai 2017 à 16:27:59

CedricDeMartin

29 mai 2017 à 9:42:40

pour ce qui est de l'affichage la méthode au dessus devrait faire l'affaire

Pour la récupération si tu veux le faire en automatique par rapport au contenu du dossier sans te soucier des noms de fichiers

il faut passer par AJAX pour charger un script php qui te permettera de récuperer l'ensemble des fichiers images que tu veux afficher

exemple:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>sans titre 1</title>
<script type="text/javascript">
function WJS_getXMLHttpRequest() {
    var xhr = null;    
    if (self.XMLHttpRequest || self.ActiveXObject) {
        if (self.ActiveXObject) {
            try{ xhr = new ActiveXObject("Msxml2.XMLHTTP");}
            catch(e){ xhr = new ActiveXObject("Microsoft.XMLHTTP");}
        }
        else{ xhr = new XMLHttpRequest();}
    }
    else{
        alert("Erreur - Votre navigateur ne supporte pas l'objet XMLHTTPRequest..."); return null;
    }  
    return xhr;
}
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function WJS_xhr_request(dossier,callback){
	var xhr = WJS_getXMLHttpRequest();
	xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200 ){ 
        	if(typeof callback != "undefined"){
        		if(typeof callback == "function"){ callback(xhr.responseText);}
        		else{ alert('WJS_xhr_request ( Fonction callback introuvable )');}
        	} 
        }
    }
    xhr.open('POST', 'recup_img.php', true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send('dossier_source='+dossier);
}
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function WJS_fct_retour(TXT){
	document.body.innerHTML = TXT;
}
//-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 WJS_xhr_request('/',WJS_fct_retour);
</script>
</head>

<body>

</body>

</html>

a la ligne 42 pour l'url juste '/' pointe vers le même dossier que le fichier qui l'appelle

puis le fichier PHP

<?php
function WPHP_gdd_lister_img($Directory){
	$tb_image = []; $tb_ext_valide = array('jpeg','JPEG','jpg','JPG','png','PNG','gif','GIF');
	$MyDirectory = opendir($Directory) or die('Erreur');
	while($Entry = readdir($MyDirectory)){
		if(!is_dir($Directory.$Entry)){
			$ext = pathinfo($Entry, PATHINFO_EXTENSION);
			if(in_array($ext,$tb_ext_valide)){
				$tb_image[] = $Entry; 
			}
		}
	}
	closedir($MyDirectory);
	if(count($tb_image) < 1){
		$tb_image = 'Aucune image trouvée';
	}
	else{ $tb_image = implode(';',$tb_image); }
	return $tb_image;
}
if((!isset($_POST['dossier_source'])) || (empty($_POST['dossier_source']))){
	echo 'Pas de dossier source';
}
else{
	echo WPHP_gdd_lister_img($_POST['dossier_source']);
}

?>

Après pour la fonction de callback je fait juste l'afficher le texte retourner dans le corps de la page

j'ai mi des ';' pour pouvoir dans la fonction callback recréer un tableau avec JS avec fonction SPLIT

var tb_image = TXT.split(';');

Voilà peut être une idée sur ce que tu recherche

Tiens nous au courant

-
Edité par CedricDeMartin 29 mai 2017 à 9:51:45

Gulian

30 octobre 2017 à 13:04:55

Merci pour vous réponses (malgré mon inactivité sur le forum ahah) :D

Ca fonctionne niquel grace a vous ;)

Futur Guru CyberSécurité !