Discussion :

[jpe54]

Bonjour,

Fonction du navigateur utilisé, (en particulier Firefox et Chrome) j'ai un problème de récupération de la hauteur et largeur de l'image préchargée. Pourtant j'effectue plusieurs tests : image complètement chargée et ou hauteur / largeur non nulle

Voici le code javascript qui me pose problème :

La fonction resize véhicule le nom de l'image, la hauteur écran, la largeur écran.

Si taille image inférieur à l'écran l'image reste en l'état. Sinon on la recadre en respectant le ratio image verticale ou horizontale maximum selon résolution écran.

Mon problème est la récupération de la taille de l'image qui va être affichée par la suite...

Je précharge donc cette image... J'ai ajouté un image.onload pour ne pas avoir une taille zéro uniquement sous Firefox et Chrome... qui retourne True systématiquement sur image.complete, donc je teste aussi la dimention de l'image...

Mon code passe outre ce test... Pourquoi ?

J'ai donc inséré un onload...

La boite d'alerte récupère à tout coup la hauteur et la largeur de l'image préchargée… les variables imgH et imgW qui suivent contiennent bien ces valeurs mais ensuite elles sont perdues une fois l'instruction image.src = url;… tant avec la valeur this.width que image.width.

Où se situe ma bourde ? Je patine dans la choucroute depuis une semaine...

Merci par avance !

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script type="text/javascript">
 
function IsImageOk(img) {
 
// Test si image non chargée
if (!img.complete) {
return false;
}
 
// Test si largeur zéro
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
return false;
}
 
// Test si hauteur zéro
if (typeof img.naturalHeight != "undefined" && img.naturalHeight == 0) {
return false;
}
 
// Sinon tout est Ok
return true;
}
 
 
function myTimer()
{
// pour patienter
}
 
 
// Permet de limiter la taille de l'image à la résolution écran si besoin
function resize(url, mh, mw) {
 
// Précharger Image(url)
var image = new Image();
 
 
image.onload = function() {
// pour test si récup hauteur et largeur
alert(this.width + " x " + this.height);
 
// Déterminer la taille de l'image chargée
	imgH = this.height;
	imgW = this.width;
}
 
image.src = url;
 
// Test image non chargee on patiente
if (!IsImageOk(image)) {
myVar = setInterval(function(){myTimer()},1000);
}
 
// Déterminer la taille de l'image chargée
//	imgH = image.height;
//	imgW = image.width;
 
	if( imgH < mh && imgW < mw ) {
	// Image d'origine plus petite que la fenêtre, on initialise la taille de l'image
		imgH = imgH;
		imgW = imgW;
	} else {
		imgH = imgH;
		imgW = imgW;
		ratioH = mh / imgH;
		ratioW = mw / imgW;
		if ( ratioH < ratioW || imgH == imgW ) {
			imgH = Math.floor((imgH * ratioH));
			imgW = Math.floor((imgW * ratioH));
		} else {
			imgH = Math.floor((imgH * ratioW));
			imgW = Math.floor((imgW * ratioW));
		}
	}
}
 
</script>

[Lorenzo77]

salut,

faut mettre toutes les actions sur l'image dans le bloc onload !

[jpe54]

Bonjour à vous tous,

faut mettre toutes les actions sur l'image dans le bloc onload !

Effectivement cette remarque m'a parue logique... malheureusement sur if( imgW < mw || imgW < mh ) toujours une erreur imgW non défini...

Je te propose une version allégée de ton script

Avec ce script je retourne malheureusement à mon script de départ : imgW affiche une valeur zéro sous FireFox et Chrome... comme si le chargement de l'image n'était pas terminé, mais fonctionne parfaitement avec Internet Explorer !

Je poursuis mes investigations mais reste preneur de toute idée pour récupérer ces fameuses hauteur / largeur d 'image après préchargement complet !

Bien cordialement à vous 2...

[rogerlenoir]

Bonjour,

Il y a plusieurs pb dans ton script
Il te faut déclarer les variables en dehors de la portée des fonctions si tu veux les réutiliser dans d'autres.
Le this ne cible pas ton objet image.

Tes tests, n'empêchent peut-être pas ton script de tourner mais ils ne servent pas à grands chose vu que ce que tu attends de la fonction onLoad se fera automatiquement.

Je te propose une version allégée de ton script,

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
function precharge(url) {
	var image = new Image();
	image.src = url;
	image.onLoad=imageLoaded(image);
}
 
function imageLoaded(image){
 
	imgH = image.height;
	imgW = image.width;
 
	mh = document.body.clientHeight;
	mw = document.body.clientWidth ;
 
	if( imgW < mw || imgW < mh ) {
	// Image d'origine plus petite que la fenêtre, on initialise la taille de l'image
	} else {
			ratioH = mh / imgH;
			ratioW = mw / imgW;
			if ( ratioH < ratioW || imgH == imgW ) {
				imgH = Math.floor((imgH * ratioH));
				imgW = Math.floor((imgW * ratioH));
			} else {
				imgH = Math.floor((imgH * ratioW));
				imgW = Math.floor((imgW * ratioW));
			}
	}
	alert('imgW  '+imgW )
}
 
precharge("monImage")

[rogerlenoir]

Chez moi sous firefox le script retourne la nouvelle dimension.

il faut dire que je passe par wamp et que si j'appelle la page html directement, le script ne fonctionne pas.

Je n'avais pas testé sous chrome ... effectivement le script ne fonctionne pas ou pire seulement une fois sur quatre, c'est énervant .

Maintenant je me souviens avoir eu exactement le même problème sous chrome lors de la création d'un diaporama.
Après recherche, il me semble avoir appris que Chrome ne gère pas le chargement des images comme les autres navigateurs.
Je ne me souviens plus comment j'avais réglé ça ( en plus c'était en Jquery)

Peut-qu'en chargeant l'image dans un élément image placé à - 2000 px à gauche, peut=être qu'alors tu pourras récupérer les dimensions de ton elément

A+

[Lorenzo77]

ce bout de code fonctionne avec FF et chrome :

Code :

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

1
2
3
4
5
6
7
 
  im = new Image();
  im.src = './16x16/bedrock.png';
 
  im.onload = function(e) {
    console.log('onload', e.target, e.target.width, e.target.height);
  };

dans le onload je recup la largeur/hauteur en visant la cible (sans passer par this)

[rogerlenoir]

Merci Lorenzo pour cette leçon de concision

la solution passait donc par l'objet "event" mis à disposition par le gestionnaire d'événements JS et bien sur par sa cible (target).

Ce qui pose pb avec Ie c'est qu'il ne nomme pas la cible de "event", "target" mais "srcElement".

Pour une compatibilité avec Ie il faudrait écrire :
(Il faudrait car je n'ai pas testé, donc je m'avance sur des oeufs)

Code :

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

1
2
if (e.target) console.log('onload', e.target, e.target.width, e.target.height)
else console.log('onload', e.srcElement, e.srcElement.width, e.srcElement.height);

[Bovino]

Code :

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

1
2
3
4
var monImg = new Image();
monImg.onload = function(){
	alert(monImg.width + ' / ' + monImg.height);
}

fonctionne parfaitement...

EDIT :
Dans ton code,

Code :

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

image.onLoad=imageLoaded(image);

est une erreur : dans ce cas, tu attaches à l'événement onload le résultat de l'exécution de la fonction imageLoaded() !
Il faut faire

Code :

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

image.onLoad=imageLoaded;

pour affecter une référence à la fonction, qui sera donc exécutée lors du déclenchement de l'événement.
Pour passer des paramètres, tu peux faire

Code :

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

image.onLoad=function(){imageLoaded(image)};

[rogerlenoir]

Et voilà pourquoi il y en a qui sont dit "expert" voire "responsable développement".
Ils écrivent quelques lignes et t'expliquent tes erreurs.

Sincèrement merci

Patrick

[jpe54]

Bonjour et merci a vous tous pour vos post

Je suis en deplacement et ne pourrai tester que lundi

[jpe54]

Bonjour,

Malheureusement malgré les propositions de ce post le mystère reste entier : la taille de l'image n'est pas véhiculée à chaque fois…

Peut-être existe-t-il un solution pérenne toute simple en seul CSS... mais respectant une taille proportionnelle fonction d'une image horizontale ou verticale ?

Cordialement

[NoSmoking]

Bonjour,
il faudrait que tu nous montres ton implémentation, car il n'y a aucune raison que cela ne fonctionne pas.

Code :

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

1
2
3
4
5
var oImage = new Image();
oImage.onload = function(){
  alert( this.height +'\n' +this.width);
}
oImage.src = 'http://www.developpez.net/template/images/logo.png';

[Bovino]

Eventuellement, un code un peu plus complet

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var oImage = new Image();
oImage.onload = function(){
  alert( this.height +'\n' +this.width);
};
oImage.onerror = function(){
  alert('Ton image craint un peu !');
};
oImage.src = 'http://www.developpez.net/template/images/logo.png';
if(oImage.complete){
  alert( oImage.height +'\n' +oImage.width);
  oImage.onload = null;
}