Récupération taille d'image sous chrome

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

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, 16h45

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, 18h44

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

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

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, 16h23

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, 16h34

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).

Récupération taille d'image sous chrome

JavaScript

Vue hybride

Discussions similaires

Partager

Partager