Récupération taille d'image sous chrome

Version imprimable

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:
15/01/2014, 22h34
Invité

a mon avis il faudrait précharger les images au chargement de la page comme ça le problème est résolu
16/01/2014, 08h32
SpaceFrog

Oui un preloader qui affecte le onload a chaque image et stocke les dimensions ..
16/01/2014, 18h08
NoSmoking

Citation:

Envoyé par mekal

a mon avis il faudrait précharger les images au chargement de la page comme ça le problème est résolu

attention quand même au nombre et à la taille des images, cela peut devenir vite très lourd.
17/01/2014, 08h34
filtep

Citation:

Je ne comprends pas ce que tu ne comprends pas

Bah lis le message jusqu'au bout ! (y compris le PS)
Rassure moi, tu fais exprès, t'es pas comme ça dans la vraie vie et au boulot 8O

Bon de toutes façons le pb est résolu, je traite les données dans le Onload comme le recommande NoSmoking plus haut et ça roule (même si la chronologie du traitement des évènements m'échappe toujours...)

Merci à vous
17/01/2014, 14h04
SylvainPV

Inutile d'être méprisant, dois-je te rappeler que je réponds à tes questions juste par gentillesse ? Dans la vraie vie et au boulot, j'ai la chance d'avoir affaire à des gens plus respectueux, surtout quand ils demandent de l'aide :roll:

J'ai lu ton message jusqu'au bout et tu n'es pas clair dans tes explications. Vu que le résultat de l'ordre des alertes est normal, tu as dû comprendre de travers.

http://jsfiddle.net/Rm735/1/

---> Message 1: On rentre dans la fonction click
---> Message 2: La taille de l'image n'a pas encore été récupérée: undefined*undefined
---> Message 3: On connait maintenant les dimensions: 479x535

A noter que certains navigateurs superposent les messages d'alertes plutôt que les envoyer dans l'ordre. Ca n'empêche que l'ordre est bon.
17/01/2014, 14h17
SpaceFrog

Je pense que c'est surtout parce qu'il n'a pas saisi les mécanismes et leur chronologie...
17/01/2014, 15h26
Bovino

Citation:

même si la chronologie du traitement des évènements m'échappe toujours...

Bah... rien de très extraordinaire en fait : ils sont exécutés dans l'ordre où ils sont déclenchés ! :aie:
Bref, lorsque tu poses des gestionnaires d'événements, tu leur affecte une fonction de rappel (callback) qui attend que l'événement survienne pour être exécutée.
Dans ton exemple, si tu as plusieurs images avec chacune un événement onload associé, le code correspondant à ces gestionnaires sera exécuté à chaque fois qu'une image aura fini de se charger (et donc pas forcément dans l'ordre où les images sont insérées dans le code ni dans l'ordre de déclaration des gestionnaires).
17/01/2014, 15h26
Invité

avec une image en haute resolution et la on s'apercois que l'ordre n'est plus le même et montre bien que le onload est indépendant de la fonction

http://jsfiddle.net/r8uqj/
17/01/2014, 19h26
SylvainPV

J'ai toujours le même ordre sur tous les navigateurs que je teste... Le onload est bien indépendant de la fonction mais l'instruction synchrone s'exécutera toujours plus vite que l'asynchrone, sauf dans quelques très rares cas dont j'ai parlé plus haut.
17/01/2014, 19h44
filtep

Merci à tous,
désolé Sylvain je n'ai pas voulu être désagréable et surtout pas méprisant, c'était juste un peu d'humour.
Certaines notions de base m'échappent, c'est pourquoi je recherche un "cours" sur le fonctionnement de js, et je ne trouve que des cours sur l'utilisation.
En tous cas merci à tous de votre aide et encore désolé de t'avoir froissé Sylvain.

Amicalement
Philippe
17/01/2014, 21h47
Invité

Citation:

---> Message 1: On rentre dans la fonction click
---> Message 2: La taille de l'image n'a pas encore été récupérée: undefined*undefined
---> Message 3: On connait maintenant les dimensions: 479x535

autant pour moi;)

Citation:

Merci à tous,
désolé Sylvain je n'ai pas voulu être désagréable et surtout pas méprisant, c'était juste un peu d'humour.
Certaines notions de base m'échappent, c'est pourquoi je recherche un "cours" sur le fonctionnement de js, et je ne trouve que des cours sur l'utilisation.
En tous cas merci à tous de votre aide et encore désolé de t'avoir froissé Sylvain.

ca viendra avec le temp
18/01/2014, 02h01
filtep

"au temps" pour moi et pas "autant" (validé Académie Française, ça vaut bien le W3C)

Ca viendra avec le temp"s" ...

:mrgreen: :mrgreen: (j'peux pas m'empècher, c'est mon côté potache les gars...)

A+
Philippe
18/01/2014, 07h51
NoSmoking

Citation:

"au temps" pour moi et pas "autant" (validé Académie Française, ça vaut bien le W3C)

Mince je pensais que c'était OTAN, Oubli Temporaire Attribué aux Neurones. :mouarf:
18/01/2014, 21h13
SylvainPV

Autant ou au temps, les deux sont valables car on a perdu l'origine de l'expression.
http://www.langue-fr.net/spip.php?article14
18/01/2014, 22h17
Invité

on en apprend tous les jour.

( mais combien on en perd tous les jours ? )

Fuseau horaire GMT +2. Il est actuellement 22h23.