Redirection de page en fonction de la taille de l'image

Résolu/Fermé
DADYY87 - 28 juin 2021 à 13:12
 DADYY87 - 28 juin 2021 à 16:01
Bonjour,

Je souhaite faire une redirection de la page lorsque l'image est de la taille suivante : 120x120 ou inférieure.
J'ai essayé de le faire de la manière suivante pour tester :

function getwidth(){
      var img = document.querySelector("#myImg");
      var width = img.clientWidth;
    }

    function getheight(){
      var img = document.querySelector("#myImg");
      var height = img.clientHeight;
    }

     // Redirection de page en fonction de la taille de l'ecran
    if (screen.width <= 560 || getwidth() <= 120 && getheight() <= 120){
      window.location.replace("https://www.ccb81.fr/embauche/resize_img.php");
    }


<img src="https://www.calguns.net/images/120x120/blue120x120.gif" id="myImg">


Sauf que la redirection lorsque l'image est à 120 ne se produit pas...
Je ne sais pas comment faire, si quelqu'un peut m'aider svp ?

3 réponses

Salut,
les fonctions ne retournant aucune valeur le problème doit être là.
Voir la portée des variables en JavaScript.
Un simple test avec console.log vous aurait montré que les fonctions ne retournent aucune valeur.

function getwidth(){
      return document.querySelector("#myImg").clientWidth;
 }
//--ou mieux
function getImgWidth(selector){
      return document.querySelector(selector).clientWidth;
}
//--

console.log(getImgWidth("#myImg"));



Sinon pour utiliser les variables en "globales" on peut faire comme ceci, mais c'est moins pratique il me semble ici:
var width;
function loadWidth(){
width=document.getElementById('myImg').clientWidth;
}
loadWidth();
console.log(width);
console.log('équivaut à : '+window.width);
1
Merci pour ton aide Automaton !! J'ai enfin réussi à faire ma condition cependant j'ai de nouveau un autre problème et je suis un peu dans l'incompréhension...
Lorsque je mets à présent n'importe quelle image c'est a dire une image qui dépasse la dimension que j'avais donné dans ma condition la redirection continue à se faire... Or ce que je souhaite avoir c'est faire ma redirection que si l'image est en dessous de 120 x 120 sinon rester sur ma page actuelle...

Voici le code :
<div class="text-center">
    <!-- bandeau de presentation de la page-->
    <h2 style="text-align: center;" class="grosseur">Cadrage de la photo</h2>
    <figure class="figure">     
		<?php echo'<img class="img" src="./img_tmp/'.$user_id.'-identite.'.$ext.'" id="cropbox"/>' ?>
    </figure>


      var width;

      function getwidth(){
       width = document.getElementById("cropbox").clientWidth;
      }

      getwidth();
      var height;

      function getheight(){
       height = document.getElementById("cropbox").clientHeight;
      }

      getheight();

      // Redirection de page en fonction de la taille de l'image
      if ( width <= 120 && height <= 120 ) {
       window.location.replace('https://www.test/resize_img.php?extension=<?php echo ($ext);?>');
      }


J'espère ne pas être flou dans mes explications...
0
Apparemment je viens de m'apercevoir que l'action se produit correctement que lorsque le cache est vidé, c'est assez problématique... J'imagine que je dois ouvrir un autre forum...
0