Redimensionnement d'une image

Soyez le premier à donner votre avis sur cette source.

Snippet vu 21 823 fois - Téléchargée 23 fois

Contenu du snippet

tout dabord se code n'est pas de moi mais il fait exactement ce que je cherche a faire c'est a dire il affiche une image a la taille maximum definie , si la taille d'origine de l'image et superieur a a la taille definie il la redimensionne en revanche si la est inferieur il garde la taille d'origine.
le pb c'est qu'il n'affiche pas l'image au premier chargement de la page
quelqu'un serrait il comment remédier a se probleme svp ?

Source / Exemple :


<HTML>
<HEAD>
<TITLE>Redimension Taille Image</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function redimImage(inImg, inMW, inMH)
{
  // Cette function recoit 3 parametres
  // inImg : Chemin relatif de l'image
  // inMW  : Largeur maximale
  // inMH   : Hauteur maximale
  var maxWidth = inMW;
  var maxHeight = inMH;
  // Declarations des variables "Nouvelle Taille"
  var dW = 0;
  var dH = 0;
  // Declaration d'un objet Image
  var oImg = new Image();
  // Affectation du chemin de l'image a l'objet
  oImg.src = inImg;
  // On recupere les tailles reelles
  var h = dH = oImg.height;
  var w = dW = oImg.width;
  // Si la largeur ou la hauteur depasse la taille maximale
  if ((h >= maxHeight) || (w >= maxWidth)) {
    // Si la largeur et la hauteur depasse la taille maximale
    if ((h >= maxHeight) && (w >= maxWidth)) {
      // On cherche la plus grande valeur
      if (h > w) {
        dH = maxHeight;
        // On recalcule la taille proportionnellement
        dW = parseInt((w * dH) / h, 10);
      } else {
        dW = maxWidth;
        // On recalcule la taille proportionnellement
        dH = parseInt((h * dW) / w, 10);
      }
    } else if ((h > maxHeight) && (w < maxWidth)) {
      // Si la hauteur depasse la taille maximale
      dH = maxHeight;
        // On recalcule la taille proportionnellement
      dW = parseInt((w * dH) / h, 10);
    } else if ((h < maxHeight) && (w > maxWidth)) {
      // Si la largeur depasse la taille maximale
      dW = maxWidth;
        // On recalcule la taille proportionnellement
      dH = parseInt((h * dW) / w, 10);
    }
  }
  // On ecrit l'image dans le document
  document.writeln("<img src=\"" + inImg + "\" width=\"" + dW + "\" height=\"" + dH + "\" border=\"0\">");
};
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
redimImage('image.jpg', 50, 50)
</SCRIPT>
</BODY>
</HTML>

A voir également

Ajouter un commentaire Commentaires
Messages postés
28
Date d'inscription
dimanche 27 mars 2005
Statut
Membre
Dernière intervention
27 juillet 2011

Bonjour Vallica

Tu nous expliques en 2006 : "c'est à dire qu'avant de stocker l'image sur ton serveur tu la formate"

Quelle est la méthode utilisée pour faire ce fameux formatage ?
Messages postés
17
Date d'inscription
dimanche 26 décembre 2004
Statut
Membre
Dernière intervention
16 octobre 2006

Salut,
Ce dernier commentaire est juste, je voudrais juste ajouter que si tu redimentionne ton image avec javascript, tu risue d'avoir des effets de trame, si tu ne voit pas ce que c'est je peut te dire c'est pas beau et çà peut arriver que tu change l'échelle de 1% ou de 99% sans prévenir.
Si tu n'a pas gd et que ton site est statique, préfère mettre sur ton site des images dimentionnées par The Gimp ou Photoshop par ex. de différentes tailles suivant la résolution du client -> le javascript calule la résolution et affiche l'image adéquate.

Seb aussi
Messages postés
9
Date d'inscription
mardi 31 mai 2005
Statut
Membre
Dernière intervention
19 novembre 2006

Salut,

Bon c'est la première fois que je réagis sur une source, alors je tiens à préciser que je ne suis pas du genre à critiquer betement, et que je trouve très bien que tu ais eu envie de faire partager ta découverte.

Par contre :

- le document.write c'est pas propre, on utilise les fonctions dom à la place
- on ne peut pas dire que l'image est redimensionnée, car on force juste des attributs, c'est à dire que si tu as une image de 3000*2000 et que tu l'affiche avec ton script, bonjour le temps de chargement même si elle s'affiche effectivement en 30*20

Tout ca juste pour te dire que je pense qu'il vaut mieux passer coté serveur pour redimensionner ton image avec une librairie type GD si tu es en php.
Alors tu peux le faire lors de l'upload, c'est à dire qu'avant de stocker l'image sur ton serveur tu la formate comme ca au moins pas de problème à l'affichage, sinon lors de l'affichage, tu teste ses dimensions et tu redimensionne à la volée.
Je préfère de loin la première technique, car tu va gagner de la place sur ton serveur, car à l'heure ou tout le monde possède un appareil à 6millions de pixels, les photos au format 3000*2000 se mutliplient très vite !

Seb.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.