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 !

[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")

[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]

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

[jpe54]

Bonjour à vous tous,

Mon idée répond au cahier des charges suivant utilisant uniquement du HTML et javascript : Actualisation de 2 éléments tant en utilisation locale depuis un DVD qu’au travers Internet depuis un serveur distant qui portera sur :

Des dossiers format AAAA-MM-JJ légendés, qui contiendront en sous dossier un répertoire Vignettes (Images miniature) et un répertoire Affichage contenant les images HD.

Un unique fichier Liste_Diapos.js où figure l’arborescence des images présentes en format HD, par exemple toute une liste de photos sur un thème donné (Vacances 2012 etc…)


Sans maintenance à venir, présence de trois Fichiers HTML W3C (sans compter le fichier de style CSS) dont le seul à connaitre par l’utilisateur sera index.htm :

index.htm > Génère automatiquement un menu fonction du contenu de Liste_Diapos.js en précisant l’image de départ pour une utilisation diaporama globale future…

index_Vignettes.htm > Affiche les seules vignettes du menu choisi.

index_Affichage.htm > Affiche en plein écran la photo HD choisie en limitant sa taille en fonction de l’espace d’affichage présent…


C’est sur ce codage que je patine pour récupérer dynamiquement la dimension de l’image à afficher… (Je ne souhaite pas procéder différemment en plaçant hauteur / largeur de l’image dans le nom même de la photo… et en décortiquant cette zone)

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
// Précharger Image(url)
var image = new Image();
 
// ==========================================================================
// ==========================================================================
// ==========================================================================
// Début - Code posant problème de récupération variables imgH et imgW
// ==========================================================================
// ==========================================================================
// ==========================================================================
 
// Permet de limiter la taille de l'image à la résolution écran si besoin
function resize(url, mh, mw) {
// Corriger la taille des écrans pour la partie réservée aux images full
// mh = screen.availHeight - 165;
// mh = screen.height - 165;
// mw = screen.width - 20;
 
mh = mh - 165;
mw = mw - 20;
 
 
image.onload = function() {
// Déterminer la taille de l'image chargée horizontale ou verticale
	imgH = image.height;
	imgW = image.width;
// alert("onload > " + image.width + " x " + image.height);
}
 
// Pour test (à supprimer...)
image.onerror = function() {
alert("Problème sur image");
}
 
if (image.complete) {
// alert("image.complete > " + image.width + " x " + image.height);
// Déterminer la taille de l'image chargée horizontale ou verticale
	imgH = image.height;
	imgW = image.width;
image.onload = null;
}
 
image.src = url;
 
// Déterminer la taille de l'image chargée horizontale ou verticale
	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));
		}
	}
 
alert(url + " - " + mh + " - " + mw + " - " + imgH + " - " + imgW );
 
}
 
// ==========================================================================
// ==========================================================================
// ==========================================================================
// Fin - Code posant problème de récupération variables imgH et imgW
// ==========================================================================
// ==========================================================================
// ==========================================================================

Puis l'appel de la fonction resize :

Code :

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

1
2
3
4
5
6
7
8
// Appel de la fonction résize à problème
	resize(image, MyEcranH, MyEcranW);
 
	document.write('<td><table><tr>')
 
	document.write('<td><a href="'+url+'"><img id="Photos" src="'+image+'" alt="'+caption+'" width="' + imgW + '" height="' + imgH + '"></a></td>')
 
	document.write('</tr></table></td>')

En local avec IE les dimensions sont véhiculées… mais pas avec Firefox ou Chrome… et plus du tout en ligne sur serveur y compris avec IE… De fait je présume la poursuite du code malgré un chargement incomplet de l’image sans trouver de solution pérenne pour tout navigateur…

Je vous livre ce code en l’état de mes investigations - différent de l’original posté en entête de ce fil - avec béquilles ajoutées suite aux remarques formulées…

Dans l’exemple joint les valeurs attendues pour imgW et imgH sont respectivement, pour une image Horizontale 1620 et 1080 ; pour une image Verticale 1080 et 1620…

Fichier de départ, index.htm en ligne à ce lien :
http://pagesperso-orange.fr/open-sou...Test/index.htm

L’archive complète de ce site test avec les images HD (12 Mo) ici :
http://pagesperso-orange.fr/open-sou.../DiapoHTML.zip

NB : Seul le choix "Etang de Lindre" contient réellement un répertoire avec des images…

Bien Cordialement

[jpe54]

Bonjour,

Ai appliqué une solution temporaire avec le code ci-dessous sur le site actuellement en ligne (manque l'affichage du div une fois image complete sur le site test en ligne)

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
var image = new Image();
 
 
// Permet de limiter la taille de l'image à la résolution écran si besoin
function resize(url, mh, mw) {
// Corriger la taille des écrans pour la partie réservée aux images full
mh = mh - 165;
mw = mw - 20;
 
// ==========================================================================
// ==========================================================================
// ==========================================================================
// Début - Code posant problème de récupération des variables imgH et imgW
// Poursuite de cette fonction avant image onload si navigateur autre que IE
// ==========================================================================
// ==========================================================================
// ==========================================================================
 
// image.onload = function() {
// alert("onload > " + image.width + " x " + image.height);
// }
 
// Pour test (à supprimer...)
// image.onerror = function() {
// alert("Problème sur image");
// }
 
// if (image.complete) {
// alert("image.complete > " + image.width + " x " + image.height);
// image.onload = null;
// }
 
// image.src = url;
 
// Déterminer la taille de l'image chargée horizontale ou verticale
//	imgH = image.height;
//	imgW = image.width;
 
// alert(url + " - " + mh + " - " + mw + " - " + imgH + " - " + imgW );
 
// ==========================================================================
// ==========================================================================
// ==========================================================================
// Fin - Code posant problème de récupération des variables imgH et imgW
// ==========================================================================
// ==========================================================================
// ==========================================================================
 
 
// ==========================================================================
// ==========================================================================
// ==========================================================================
// Debut - Code Temporaire pour fixer les variables imgH et imgW
// ==========================================================================
// ==========================================================================
// ==========================================================================
 
// Déterminer la taille de l'image chargée horizontale ou verticale
// Taille fixe Ratio 24x36 soit 1080x1620 dpi
// Si lettre V dans le nom de l'image elle est Verticale sinon Horizontale
 
var i = url.lastIndexOf("/")
MyDiapo = url.substring(i + 1, url.length)
i = MyDiapo.lastIndexOf("V")
// alert(i)
 
imgH = 1080;
imgW = 1620;
 
if (i > 0) {
imgH = 1620;
imgW = 1080;
}
 
// ==========================================================================
// ==========================================================================
// ==========================================================================
// Fin - Code Temporaire pour fixer les variables imgH et imgW
// ==========================================================================
// ==========================================================================
// ==========================================================================
 
	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));
		}
	}
}

Per contre pourriez vous m'expliquer pourquoi la portion de code if( imgH < mh && imgW < mw ) est executée avant image.onload ?

Cordialement

Merci par avance...

[jpe54]

Bonjour à tous,

Voici la solution appliquée pleinement fonctionnelle pour redimentionner de manière proportionnelle une image ...

Cordialement,

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
function resize_srcImg(urlImage, mw, mh, ajustw, ajusth, idConteneur) {
 
// Largeur Hauteur disponible sur la page - Correction éventuelle
mw = mw - ajustw;
mh = mh - ajusth;
 
var photo = new Image();
photo.src = urlImage;
 
	photo.onload = function() {
	var imgW = photo.width;
	var imgH = photo.height;
 
	ratioH = mh / imgH;
	ratioW = mw / imgW;
 
		if (ratioH < ratioW || imgH == imgW) {
			imgH = Math.floor((imgH * ratioH) - 30);
			imgW = Math.floor((imgW * ratioH) - 10);
		} else {
			imgH = Math.floor((imgH * ratioW) - 30);
			imgW = Math.floor((imgW * ratioW) - 10);
		}
// On passe les variables Hauteur Largeur au conteneur img selon id
	document.getElementById(idConteneur).width = imgW;
	document.getElementById(idConteneur).height = imgH;
	}
}