Récupération taille d'image sous chrome

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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

Trouvé sur stackoverflow :

Code:

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
}

12/01/2014, 18h44
filtep

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

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:

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

13/01/2014, 16h23
SylvainPV

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.
13/01/2014, 16h34
filtep

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).
13/01/2014, 16h46
SpaceFrog

non il suffit de passer par le onload de tes images ...
13/01/2014, 16h52
filtep

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 ?
13/01/2014, 17h01
SpaceFrog

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
13/01/2014, 17h31
filtep

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 :aie:...

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:

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

13/01/2014, 18h25
NoSmoking

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.
13/01/2014, 18h37
filtep

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
14/01/2014, 11h06
filtep

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 :lol:

Merci d'avance
Philippe
14/01/2014, 18h41
SylvainPV

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

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
14/01/2014, 19h17
filtep

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

et comme ça

Code:

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);
      }
 
}

14/01/2014, 21h28
filtep

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
15/01/2014, 19h35
Invité

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:

var image_aprecharger = new Image

on dit ou se trouve l'image a precharger

Code:

image_aprecharger.src = 'lechemin/limage.jpg'

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

Code:

image_aprecharger.onload=function(){du code du code}
15/01/2014, 19h49
SylvainPV

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.

Citation:

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 :mrgreen:

Voir 40 message(s) de cette discussion en une page