Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1243 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de redimensionnement image en javascript

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème de redimensionnement image en javascript

n°1949233
garath_
Posté le 10-12-2009 à 21:02:46  profilanswer
 

Bonjour,
 
Je suis assez debutant en javascript, mais malgré cela je me suis bien documenté sur les causes de mon problème et je ne vois pas d'où ça vient.
Je cherche à redimensionner une image à la volée.
Pour cela j'utilise ce script:

Code :
  1. document.getElementById('suivante').onclick = function suivante() {
  2.    numero += 1;
  3.    if (numero == lien_image.length + 1) numero = 1;
  4.    document.getElementById("image_prod" ).setAttribute("style", "visibility:hidden;" ); //cache image actuellement affichee
  5.    document.getElementById("image_prod" ).setAttribute("width", "" ); //redonne la largeur d'origine
  6.    document.getElementById("image_prod" ).setAttribute("height", "" ); // redonne la hauteur d'origine
  7.    document.getElementById("image_prod" ).setAttribute("src", lien_image[numero]); //remplace l'image actuelle par la suivante    
  8.    redim_image(lien_image[numero]); //fonction de redimensionnement de l'image
  9.    document.getElementById("image_prod" ).setAttribute("style", "" ); //affiche la nouvelle image redimensionnée
  10.    document.getElementById("numero" ).value = numero;
  11.   }


 
La fonction redim_image:

Code :
  1. function redim_image(url){
  2. var image = new Image();
  3. image.src = url;
  4. var h = image.height;
  5. var w = image.width;
  6. var dW = 0;
  7. var dH = 0;
  8. document.getElementById("lien_image_prod" ).value = url;
  9. // Si la largeur ou la hauteur depasse la taille maximale
  10. if ((h >= 110) || (w >= 230)) {
  11. // Si la largeur et la hauteur depasse la taille maximale
  12.     if ((h >= 110) && (w >= 230)) {
  13.         dH = 110;
  14.         // On recalcule la taille proportionnellement
  15.         dW = parseInt((w * dH) / h, 10);
  16.  document.getElementById("image_prod" ).setAttribute("width", dW);
  17.     }
  18.     else if ((h > 150) && (w < 230)) {
  19.       // Si la hauteur depasse la taille maximale
  20.       dH = 110;
  21.         // On recalcule la taille proportionnellement
  22.       dW = parseInt((w * dH) / h, 10);
  23.   document.getElementById("image_prod" ).setAttribute("width", dW);
  24.     }
  25. else if ((h < 110) && (w > 230)) {
  26.       // Si la largeur depasse la taille maximale
  27.       dW = 230;
  28.         // On recalcule la taille proportionnellement
  29.       dH = parseInt((h * dW) / w, 10);
  30.   document.getElementById("image_prod" ).setAttribute("height", dH);
  31. }
  32. }


 
Il s'agit d'une visionneuse d'image et, je sais, mon code est assez "bourrin", mais je débute, je le repete  :o .
 
Mon problème c'est que parfois ma fonction redim_image voit comme comme valeur de hauteur et de largeur 0.
Du coup elle ne redimensionne pas et donc l'image non redimensionnée apparait (forcement... :o ).
 
Aucune idée d'où ça peut venir car lorsque j'execute en pas à pas avec firebug tout se passe bien.
C'est comme si javascript executait des instructions avant que ma fonction redim_image soit terminée...
 
Toute aide serait bienvenue  :hello: .

mood
Publicité
Posté le 10-12-2009 à 21:02:46  profilanswer
 

n°1950643
garath_
Posté le 15-12-2009 à 21:18:21  profilanswer
 

Up?  :hello:

n°1950646
tpierron
Posté le 15-12-2009 à 21:51:26  profilanswer
 

Mouais, problème assez classique. Au moment où tu assignes l'attribut src à ton "new Image()", le chargement de l'image sera fait de manière asynchrone. Si ça prends trop de temps (genre latence réseau, image de grande taille), il y a des chances que lorsque tu essaieras de récupérer sa taille, l'image ne soit pas encore chargée.
 
Edit: quelques petits trucs bon à savoir quand on débute :

  • obj.setAttribute("abc", val) revient à la même chose que "obj.abc = val"
  • Pour arrondi à l'entier par défaut on peut utiliser l'opérateur | (ou binaire) avec l'opérande 0. parseInt c'est pour une chaine de caractère.


Pour éviter ça utilise l'événement "onload" sur ton image du style (à l'arrache, sans tester) :

Code :
  1. function redim_image(url) {
  2.    var image = new Image()
  3.    image.src = url
  4.    document.getElementById("lien_image_prod" ).value = url
  5.    image.onload = function() {
  6.        var h = this.height
  7.        var w = this.width
  8.        var dW = 0
  9.        var dH = 0
  10.  
  11.        // Si la largeur ou la hauteur depasse la taille maximale
  12.        if (h >= 110 || w >= 230)
  13.        {
  14.            // Si la largeur et la hauteur depasse la taille maximale
  15.            if ((h >= 110) && (w >= 230))
  16.            {
  17.                dH = 110
  18.                // On recalcule la taille proportionnellement
  19.                dW = (w * dH) / h | 0
  20.                document.getElementById("image_prod" ).width = dW
  21.            }
  22.            else if (h > 150 && w < 230)
  23.            {
  24.                // Si la hauteur depasse la taille maximale
  25.                dH = 110
  26.                // On recalcule la taille proportionnellement
  27.                dW = (w * dH) / h | 0
  28.                document.getElementById("image_prod" ).width = dW
  29.            }
  30.            else if ((h < 110) && (w > 230))
  31.            {
  32.                // Si la largeur depasse la taille maximale
  33.                dW = 230
  34.                // On recalcule la taille proportionnellement
  35.                dH = (h * dW) / w | 0
  36.                document.getElementById("image_prod" ).height = dH
  37.            }
  38.        }
  39.    }
  40. }


Message édité par tpierron le 15-12-2009 à 21:56:03
n°1951346
garath_
Posté le 17-12-2009 à 21:37:59  profilanswer
 

Merci de ton aide!
 
Effectivement avec l'élément onload ça fonctionne beaucoup mieux.
 
J'ai bien pris note de tes conseils!

n°1962121
garath_
Posté le 01-02-2010 à 22:16:37  profilanswer
 

J'up le topic malgré que le script ci-dessus fonctionne.
Parfois quand je fais défiler mes images certaines prennent la taille de l'image précédente ce qui fait qu'elles sont allongées ou écrasées...
Parfois aussi malgré la présence de l'élement onload, je vois furtivement l'image à sa taille d'origine...
J4ai bien investigué, mais je soupçonne toujours un problème lors du chargement.

n°1962136
tpierron
Posté le 01-02-2010 à 23:20:12  profilanswer
 

garath_ a écrit :

J'up le topic malgré que le script ci-dessus fonctionne.
Parfois quand je fais défiler mes images certaines prennent la taille de l'image précédente ce qui fait qu'elles sont allongées ou écrasées...
Parfois aussi malgré la présence de l'élement onload, je vois furtivement l'image à sa taille d'origine...
J4ai bien investigué, mais je soupçonne toujours un problème lors du chargement.


Ok, si j'ai bien compris, tu as une liste de vignette, où en cliquant dessus, ça va mettre à jour une image #image_prod, que tu redimensionnes après avoir affecté l'attribut src.
 
Dans ce cas là, l'apparition furtive sera inévitable.
 
En fait, je me demande si en enlevant pas simplement cette ligne, ça devrait au moins résoudre ce problème:

Code :
  1. document.getElementById("image_prod" ).setAttribute("src", lien_image[numero]);


n°1962138
garath_
Posté le 01-02-2010 à 23:29:10  profilanswer
 

Mais si j'enlève cette ligne je ne réaffecte pas ma nouvelle image à l'id "image_prod".
Je ne vois pas comment ça peut marcher...

 

EDIT: après avoir testé ça ne fonctionne pas... cela ne charge pas la nouvelle image.
En fait le plus gênant n'est pas cette apparition furtive. C'est surtout que l'image suivante prend les dimensions de la précédente... parfois...


Message édité par garath_ le 01-02-2010 à 23:44:59

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de redimensionnement image en javascript

 

Sujets relatifs
image survolée qui s'affiche dans 2 div différentesprobleme liste deroulante
Problème de modélisation PowerDesignerProbleme de double dans un JTextField
html et object image dans le lecteur avant visualisation[Pascal] probleme
Problème de formulaire dans formulaireProblème requête ACCESS
probleme d'enregistrementProblème d'utilisation de Ada.Streams.Stream_Io;
Plus de sujets relatifs à : Problème de redimensionnement image en javascript


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR