Recadrer || redimensionner des images avec javascript

Version imprimable

Bonjour à tous et à toutes,

Encore moi! J'ai fait une petite recherche avant de poster mais n'est aps trouver de solution concrète sur le Web. Alors si vous avez des liens tout simplement j'en serais ravis.

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
30
31
32
33
34
35
36
37
38
39
40
 
function redimImage(inImg, inMW, inMH, lienImg) {	
   var maxWidth = inMW;
   var maxHeight = inMH;
 
			   var dW = 0;
			  	var dH = 0;
 
 
			  	var oImg = new Image();
			  	oImg.src = inImg;
 
			  	/*
			  	var oLabel = new String();
			  	oLabel.String() = lienImg;
				*/
 
			  	var h = dH = oImg.height;
			  	var w = dW = oImg.width;
 
			  	if ((h >= maxHeight) || (w >= maxWidth)) {
			    	if ((h >= maxHeight) && (w >= maxWidth)) {
			      	if (h > w) {
			        		dH = maxHeight;
			        		dW = parseInt((w * dH) / h, 10);
			      	} else {
			        		dW = maxWidth;
			        		dH = parseInt((h * dW) / w, 10);
			      	}
			    	} else if ((h > maxHeight) && (w < maxWidth)) {
			      	dH = maxHeight;
			      	dW = parseInt((w * dH) / h, 10);
			    	} else if ((h < maxHeight) && (w > maxWidth)) {
			      	dW = maxWidth;
			      	dH = parseInt((h * dW) / w, 10);
			    	}
			  	}
 
			  	document.write('<a href="#" onclick="imageLeft(\'' + lienImg + '\'); labelImg(\'' + lienImg + '\');"><img id="' + lienImg + '" src="' + inImg + '" width="' + dW + '" height="' + dH + '" border="0" /></a> <a class="type2" href="#" onclick="imageLeft(\'' + lienImg + '\'); labelImg(\'' + lienImg + '\');">' + lienImg + '</a>');
		};

L'ensemble du code marche .... le ick! c'est que les images ne s'affiche pas si cela prend trop de temps. J'aimerais savoir comment régler le problème afin que toute les images s'affiches.

(En bref si ceci prend trop de temps au browser pour afficher les images, il ne les affichera pas (size 0 - 0)).

Merci d'avance

25/02/2008, 11h45
SpaceFrog

soit tu preloade les images, soit tu teste le complete de l'image avec de lancer le reste de la fonction ..
26/02/2008, 19h22
Alex Grenier
J'ai trouvé ce bout de code la, j'ai esseyer de l'intégrer mais ca na rien changer.

oublier de dire que j'ai mit ce code dans ma fonction mère redimImage... je ne c'est vraiment pas comment l'appeller et ou l'appeller.
Code:

1 2 3 4 5 6 function estChargee(inImg) { if(!inImg.complete) setTimeout("estChargee(inImg)", 200); //alert("Image chargée"); }
pis on rajoute ca un peu plus bas sous le code qui créer la nouvelle image ( oImg )
Code:

1 2 estChargee(oImg);
le probleme c'est que quand j'elève l'alert d'entre commentaire tout marche et il m'affiche chaque image mais si je le met entre commentaire il me manque encore des image.

Merci d'avance de méclairer la dessus
26/02/2008, 19h48
SpaceFrog

normal ^^
il faut declencher la fonction que tu veux à la place de l'alert ...

Je l'est modifier comme suit ... cependant il me manque toujours des images :(.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function estChargee(inImg, inMW, inMH, lienImg) { if(!inImg.complete) setTimeout("estChargee(inImg)", 200); //alert("Image chargée"); redimImage(inImg, inMW, inMH, lienImg); } function redimImage(inImg, inMW, inMH, lienImg) { //alert("fonction enclaché"); var maxWidth = inMW; var maxHeight = inMH; var dW = 0; var dH = 0; var oImg = new Image(); oImg.src = inImg; ........ (suite)
ce pourrais t'il que ce soit du au code de redimensionnement de l'image dans le javascript qui bug et n'arrive pas à calculer la grandeur de l'image donc l'affiche à 0x0 pixel. Selon moi c'est presque certainement cela car quand je l'enleve le browser a aucun difficulté à afficher mes images
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var h = dH = oImg.height; var w = dW = oImg.width; if ((h >= maxHeight) || (w >= maxWidth)) { if ((h >= maxHeight) && (w >= maxWidth)) { if (h > w) { dH = maxHeight; dW = parseInt((w * dH) / h, 10); } else { dW = maxWidth; dH = parseInt((h * dW) / w, 10); } } else if ((h > maxHeight) && (w < maxWidth)) { dH = maxHeight; dW = parseInt((w * dH) / h, 10); } else if ((h < maxHeight) && (w > maxWidth)) { dW = maxWidth; dH = parseInt((h * dW) / w, 10); } }
Si cette facon de redimensionner ne fonctionne pas auriez vous d'autre alternative pour redimensionner mon image en gardant les proportions.

Merci d'avance pour vos réponse et merci à toi pour m'avoir fait réaliser ma gaffe d'avoir mis ma fonction dans l'autre fonction :P chu fatiguer et ca parait :P.

Bon trouver la solution comme j'utilise http://www.server2go-web.de/ qui permet de mettre du php sur mon CD-Rom j'ai décider de prendre les valeur de la hauteur et de la largeur en php et de les envoyer a mon script javascript pour le resize.

Voici deux parti du code la premiere c'est la fonction javascript qui resize et la seconde mon truc php qui envoie. Si ca peut vous être utilile tant mieux :P ca vous evitera chercher une alternative javascript et de l'avoir en php. Il ce peut (c'est sure) que le code ne soit pas clean ... j'en suis désolé mais ca fait longtemps j'ai pas programé autre chose que de l'actionscript ou de XHTML/CSS :( alors j'ai quelque difficulté de ce coter la. si vous voyer des meilleur facon et une maniere de le mettre plus propre n'hésiter pas.

la fonction :

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
 
function estChargee(inImg, largeurImg, hauteurImg, inMW, inMH, lienImg) {
			  	if(!inImg.complete) setTimeout("estChargee(inImg)", 200);
			  	redimImage(inImg, largeurImg, hauteurImg, inMW, inMH, lienImg);
		}
 
		function redimImage(inImg, largeurImg, hauteurImg, inMW, inMH, lienImg) {	
 
				var maxWidth = inMW;
			   var maxHeight = inMH;
 
			   var dW = largeurImg;
			  	var dH = hauteurImg;
 
				var h = dH;
				var w = dW;
 
			  	if ((h >= maxHeight) || (w >= maxWidth)) {
			    	if ((h >= maxHeight) && (w >= maxWidth)) {
			      	if (h > w) {
			        		dH = maxHeight;
			        		dW = parseInt((w * dH) / h, 10);
			      	} else {
			        		dW = maxWidth;
			        		dH = parseInt((h * dW) / w, 10);
			      	}
			    	} else if ((h > maxHeight) && (w < maxWidth)) {
			      	dH = maxHeight;
			      	dW = parseInt((w * dH) / h, 10);
			    	} else if ((h < maxHeight) && (w > maxWidth)) {
			      	dW = maxWidth;
			      	dH = parseInt((h * dW) / w, 10);
			    	}
			  	}
 
			  	document.write('<a href="#" onclick="imageLeft(\'' + lienImg + '\'); labelImg(\'' + lienImg + '\');"><img id="' + lienImg + '" src="' + inImg + '" width="' + dW + '" height="' + dH + '" border="0" /></a> <a class="type2" href="#" onclick="imageLeft(\'' + lienImg + '\'); labelImg(\'' + lienImg + '\');">' + lienImg + '</a>');
		};

le truc php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php
                                $dir='./images/CH02_JPG';
                                $dossier=opendir($dir);
                                while($fichier=readdir($dossier)){
                                        $berk=array('.', '..');
                                        if(!in_array($fichier,$berk)){
                                                $lien=$dir.'/'.$fichier;
                                                echo '<div class="thumbails">';
                                                if(file_exists($lien)){
                                                        
                                                        $size_img = getimagesize($lien);
                                                        
                                                        echo '<script type="text/javascript">estChargee("'.$lien.'", "'.$size_img[0].'", "'.$size_img[1].'", 100, 100, "'.substr($fichier,0,-4).'");</script>';
                                                }
                                                echo '</div>';
                                        }
                                }
                        ?>

bon le code resize vient pas de moi c'est pris sur le net ... pour le reste j'ai eu de l'aide sur se forum ( grand merci ) et de deux amis chauncey et j-f.

Probablement qu'on pourrais aller directement a la fonction redimImage au lieu de passer par estChargee qui devient inutile maintenant je pense?

sur ce merci et c'est enfin résolu :P