Récupération taille d'image sous chrome

**filtep** · 12/01/2014, 17h14

Bonjour à tous,

j'ai besoin de récupérer la taille de l'image originale qui se trouve dans une vignette, voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<style>
.monBloc{
height:100px;
width:100px;
border:solid 1px black;
}
</style>
<script type="text/javascript">
function affiche_taille(){
 
           var imma=new Image();
           imma.src = 'image1.jpg';
           var haut = imma.height;
           var larg = imma.width;
 
		   alert("hauteur= " +haut +"    largeur= "+larg);
}
 
</script>
 
</head>
<body>
<img class="monBloc" src="image1.jpg" onclick="affiche_taille();" style="cursor:pointer;">
 
 
</body>
</html>

Ca marche Nickel sous FF et IE mais pas sous Chrome, pourtant l'image est chargée avant l'appel de la fonction, celle-ci étant déclenchée par le click sur la vignette...
J'ai cherché sur le net sans succès, les réponses à ce type de problème étant toujours les mêmes: code JS chargé avant l'image, ce qui n'est à priori pas le cas chez moi. J'ai essayé de mettre le script après le body, rien n'y fait...
Quelqu'un pourrait-il éclairer ma lanterne et m'aider à rendre mon bout de code full compatible ?

Merci d'avance pour votre aide

Philippe

**SylvainPV** · 12/01/2014, 17h45

Trouvé sur stackoverflow :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function getImgSize(imgSrc) {
    var newImg = new Image();
 
    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }
 
    newImg.src = imgSrc; // this must be done AFTER setting onload
}

**filtep** · 12/01/2014, 19h44

super,
ça marche partout
merci beaucoup
bonne soirée

**filtep** · 13/01/2014, 13h57

Je "détague" résolu momentanément car j'ai un autre problème avec le même code, ça doit venir de la façon dont je déclare mes variables mais franchement je vois pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<html>
<head>
<style>
.monBloc{
height:100px;
width:100px;
border:solid 1px black;
}
</style>
<script type="text/javascript">
 
     var newImg = new Image();
     var haut;
     var larg;              //   Ici les variables ont déclarées en "global"
 
 
      newImg.onload = function() {
      haut = newImg.height;
      larg = newImg.width;
	  alert(haut+"#"+larg);    // Ici le message renvoie bien les valeurs de hauteur et de largeur
      }
 
 function getImgSize() {
 alert("Message 1: On entre dans la fonction appelée par le click");
    newImg.src = 'image1.jpg'; 
	alert ('The image size is '+haut+'*'+larg);   // Ici ça ne marche plus !!!   les variables haut et larg sont "undefined" (???)
}
 
</script>
 
</head>
<body>
<img class="monBloc" src="image1.jpg" onclick="getImgSize();" style="cursor:pointer;">
 
 
</body>
</html>

Je veux bien encore un peu d'aide SVP

Philippe

**SylvainPV** · 13/01/2014, 17h23

Le chargement de l'image prend du temps ! Là tu interroges les valeurs hauteur et largeur avant que l'image n'ait été chargée et l'évènement onload déclenché. Si l'alert est à l'intérieur du onload, c'est pour une bonne raison.

**filtep** · 13/01/2014, 17h34

Le problème en fait, c'est que la petite fonction du départ était un exemple pour comprendre comment récupérer mes hauteurs et largeurs sous chrome.
Ces valeurs me servent ensuite dans une boucle qui va créer un InnerHTML (je fais un slide et la récupération des hauteurs et largeurs me sert à afficher les images sans déformation dans le slide) bref, j'ai besoin de récupérer ces valeurs dans la fonction d'origine qui a envoyé la demande pour les tailles... Il faut un setTimeOut ? (J'aime pas trop mais si c'est la seule solution).

**SpaceFrog** · 13/01/2014, 17h46

non il suffit de passer par le onload de tes images ...

**filtep** · 13/01/2014, 17h52

Mais comment je récupère les valeurs de hauteur et de largeur dans la fonction GetImgSize afin que je puisse les exploiter pour le reste de mes calculs ?

**SpaceFrog** · 13/01/2014, 18h01

dans ton code tu recupères le height et width sur new Image(), pas sur les images dans ta page ...

fais une fonction qui, au chargement, attribues un onload aux images contenues dans la page

**filtep** · 13/01/2014, 18h31

Merci de t'intéresser à mon problème et désolé d'être lourd mais comme tu as sans doute pu le constater, je ne suis pas un pro...

Je n'ai pas bien pigé ta dernière réponse, je t'explique mon problème en détails:
Je fais un code qui crée un slide à partie de vignettes qui représentent des projets. Chaque projet contient un nombre variable d'images, ça fait au total des dizaines et des dizaines de photos, on ne peut pas mettre tout ça en HTML !
donc j'ai fait une fonction qui crée le slide
function cree-slide(nomdu projet, nombre d'images)
Les images correspondant au projet sont référencées en projet1_1.jpg, projet1_2.jpg, projet2_1.jpg, etc...
Dans la fonction il y a une boucle qui crée le html du slide avec les bonnes images sauf que les images sont déformées pour s'adapter au bloc de présentation... Donc je dois récupérer les dimensions de l'image d'origine pour calculer le ratio hauteur/largeur et en fonction du résultat l'image sera en height:100% ou en width 100% (en gros, il y a quelques finesses en plus mais ce n'est pas le propos...)
Comme la fonction fait une boucle je ne peux pas (on peut toujours tout faire mais bon...) sur chaque load d'une image générer un bout du html puis le récupérer et le concaténer à la fin de la fonction d'origine.
Ca serait tellement plus simple de pouvoir récupérer mes valeurs et je pourrai utiliser le code simplement comme celui qui fonctionne parfaitement sous FF et IE sans Onload...

Je ne suis pas sûr d'avoir été clair

...

**SylvainPV** · 13/01/2014, 19h11

Tu n'as pas compris d'où venait le problème. Tu ne peux connaître les dimensions de ton image qu'au moment où elle est chargée. Donc tes valeurs hauteur et largeur seront exploitables seulement après le onload.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
     var newImg = new Image();
     var haut;
     var larg;              //   Ici les variables ont déclarées en "global"
 
      newImg.onload = function() {
         haut = newImg.height;
         larg = newImg.width;         
         //ici, j'ai l'info, je peux appeler la fonction qui a besoin de ces valeurs
     }
 
      //ici je n'ai toujours aucune idée de la taille de l'image

**NoSmoking** · 13/01/2014, 19h25

Bonjour,
j’ajouterais que c'est sur ce onload que tu pourras faire tes calculs de ratio et que si tu ne veux pas que l'on voit ton image avant qu'elle soit bien proportionnée rien ne t'empêche de lui affecter une visibility:hidden en attendant.

**filtep** · 13/01/2014, 19h37

Bon, je pense avoir pigé,
il me faut donc 3 fonctions:

1- Une qui charge les images en boucle et déclenchera le onload à chaque tour
2- Le Onload qui va faire les calculs et déclencher la 3è
3-La fonction qui va créer le innerHTML

Je teste tout ça et je reviens vers vous.

Merci

**filtep** · 14/01/2014, 12h06

Bonjour,
je reviens vers vous..., j'ai bien compris la problématique et vos explications mais quelque chose me laisse perplexe: le message généré dans le onload apparait à l'écran (avec les valeurs haut et larg correctes) avant celui généré par le getImgSize, donc quand ce dernier apparait effectivement à l'écran les variables haut et larg sont définies...
Hors le message du getImgSize les donne "undefined". Donc le message qui apparait en second (celui du getImgSize) a été "prédéfini" et "mis en réserve" ???
Auriez vous un lien sur le fonctionnement de JS et la chronologie des évènements ? Juste pour ne par mourir idiot

Merci d'avance
Philippe

**SylvainPV** · 14/01/2014, 19h41

La chronologie des évènements ? Un évènement arrive... précisément au moment où il survient

Sans le code qui va avec, j'ai du mal à comprendre tes explications. Mais en principe, les boîtes d'alertes arrivent dans l'ordre de traitement des instructions alert(). Après, si tu testes en local, le chargement de l'image est très rapide, quelques millisecondes, donc dans des intervalles de temps aussi courts il faut considérer d'autres facteurs : l'implémentation par le navigateur, le fonctionnement du moteur JavaScript... mais ça reste des cas très particuliers

**filtep** · 14/01/2014, 20h17

Eh bien les boites d'alertes arrivent exactement dans l'ordre que je te donne dans mon post précédent: d'abord celle du onload puis celle du getImgSize, pour le code c'est celui qui est dans mon post d'hier 12h57...

ordre d'apparition des alertes: ligne 25
puis ligne 21
puis ligne 27

C'est ça mon problème depuis le début...

PS "chronologie des évènements" je me suis mal exprimé, je voulais dire chronologie de traitement des données. Je pensais que le fait d'attribuer une source à l'image via le getImgSize interrompait cette fonction, que le onload s'executait puis qu'à la fin du onload on retournait à le fonction getImgSize pour finir son traitement, ce n'est visiblement pas comme celà que ça se passe puisque les valeurs haut et larg sont "undefined" dans l'alert générée dans le getImgSize qui s'affiche pourtant après celle générée par le onload...

Invité · 14/01/2014, 21h26

et comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 
 
 function getImgSize() {
 alert("Message 1: On entre dans la fonction appelée par le click");
 
 
     var haut;
     var larg;              //   Ici les variables ont déclarées en "global"
 
var newImg = new Image();
newImg.src = 'image1.jpg';
 
newImg.onload = function() {
 
haut = newImg.height;
larg = newImg.width;
 
alert ('The image size is '+haut+'*'+larg);
 
alert(haut+"#"+larg);
      }
 
}

**filtep** · 14/01/2014, 22h28

Non, il faut déclarer le onload avant d'affecter la source à l'objet image, bon je considère le problème comme résolu mais j'aurai bien aimé que l'on m'aide à comprendre l'ordre d'exécution des instructions...

Merci à tous et bonne soirée

Invité · 15/01/2014, 20h35

c'est justement l'inverse si on ne déclare pas de chemin pour l'image elle ne peut pas être précharge donc onload ne peut pas fonctionner vu qu'il n'y a pas d'image a precharger

le deroulement est le suivant

on utilise new image pour precharger une image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var image_aprecharger = new Image

on dit ou se trouve l'image a precharger

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 image_aprecharger.src = 'lechemin/limage.jpg'

on dit ce qui doit être fait quand l'image est précharge

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

image_aprecharger.onload=function(){du code du code}

**SylvainPV** · 15/01/2014, 20h49

mekal, on peut tout à fait associer l'EventListener avant de définir la source. Dans les faits ça ne change rien puisque le traitement de l'instruction suivante est toujours plus rapide que le chargement de l'image.

ordre d'apparition des alertes: ligne 25
puis ligne 21
puis ligne 27

d'après le code, c'est effectivement ce qui est censé se passer. Je ne comprends pas ce que tu ne comprends pas