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