Forums Développement Multimédia

Aller au contenu

Redimensionner images trop grande

PAO Flash

9 réponses à ce sujet

#1 beniguane1327245778

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 23 August 2007 - 08:39 AM

Bonjour.

Je me suis aperçu que certaines images trop grandes gachaient le style css de certaines pages si leur dimensions dépassaient celles de leur conteneurs (div).
La 1ère solution fut d'ajouter la propriété/valeur overflow:auto en CSS afin d'afficher un "ascenseur" pour les conteneurs (div) possédant des images trop grandes.
Solution pratique mais pas vraiment classe car le contenu entourant ces images défilent également avec cet ascenseur.

La 2ème solution est d'ajouter la propriété max-width en CSS : Cela fonctionne pas sur tous les navigateurs.

La 3ème solution est de redimensionner les images trop grandes au chargement de la page.
Facile : en javascript (je cherche même pas en PHP avec getimagesize() car trop de requêtes server).
Impeccable si dans le code HTML le tag img contient la propriété width
CODE
<img src="http://developpeur.mediabox.fr/images/logo.png" width="510" height="146" alt="developpeur image" />


Cependant, s'il n'y a aucune propriété width, comment l'obtenir ?
Même en faisant le parcours des élément image du document avec document.images ou document.getElementsByTagName('img') ... je n'arrive pas à obtenir la valeur exacte ...

CODE
function reduce_images(new_width)
{
    var images  = document.images;
    var img        = null;
    for (var i = 0; i < images.length; i++)
    {
        img = images[i];
        if(img.width > new_width)
        {
            while(img.width > new_width)
            {
                img.width -= 10;
                img.height -= 10;
            }
            img.onclick=function(){new_window=window.open(this.src,'new_resized_img','')}
        }
    }
}


Merci pour vos réponses gourou.gif

#2 Matthieu!

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 4003 messages

Posté 23 August 2007 - 16:15 PM

et img.style.width ?

#3 beniguane1327245778

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 24 August 2007 - 07:35 AM

Même pas parceque ces images ne contiennent ni identifiant ni classe.
Si ces images avaient par exemple une classe : img_site
CODE
.image_site {
border:0;
width;100px;
}

grâce au CSS, le Javascript pourrait obtenir la propriété width de chacune des images car elle serait déclarée dans le style.
Et si j'essaye de faire
CODE
img.style.width
, il me sort soit 0 ou soit rien.

Dans mon cas (fournisseur de sites gratuits), les utilisateurs écrivent leurs articles avec un éditeur wysiwyg (tinyMCE) et peuvent donc modifier les dimensions de leurs images, et peuvent également éditer directement le code HTML.


La priorité pour nous est que s'ils ne pensent pas à redimensionner leurs images (et que celles si sont tellement énormes qu'elles dépassent du <div> principal), nous le faisons automatiquement à leur place grâce au fameux script...


#4 delarueguillaume

    Ceinture Blanche

  • Members
  • Pip
  • 10 messages

Posté 24 August 2007 - 10:27 AM

Pour ma part, j'ai fait ce fichier qui réduit une image sans la déformer et qui surtout permet de ne pas dépasser une certaine hauteur ou largeur (image en portrait ou en paysage)...
=> Ca génère une image redimensionnée à la volée et ça la met en cache.

Pour afficher une image :
CODE
<img src='/thumb.php?i=chemin_de_l_image&w=110&h=110'>


Et le fichier thumb.php :
CODE
<?php
#@
#@ Load a picture and take few parameters
#@ Build cache file for thumbnail view
#@  #@ Created by Guillaume DE LA RUE <delarueguillaume@gmail.com>
#@ http://www.web2ajax.fr/
#@  #@
#@ Config
#@ ------------------------------------------------------------
$cache_dir = 'cache_files/img/';  #@  #@ Get extension
#@ ------------------------------------------------------------
#@ Return extension of a file
function _getExtension($file_name) {
    $file_infos = pathinfo($file_name);
    return '.'.$file_infos['extension'];
}  #@
#@ Get url params
#@ ------------------------------------------------------------
$width             = $_GET['w'];
$height            = $_GET['h'];
$image_file        = $_GET['i'];
$cache_force    = $_GET['cache'];  #@
#@ Set vars
#@ ------------------------------------------------------------
$image_file_extension = _getExtension($image_file, true);
$image_file_basename = @basename($image_file, $image_file_extension);    // Filename without extension '.jpg'
$thumb_file        = $image_file."_".$width."_".$height;  #@
#@ Infos in image_file
#@ ------------------------------------------------------------
## Get md5 of files location
//$image_file_md5 = md5($image_file);
$thumb_file_md5 = @md5($thumb_file);  #@
#@ If thumbnail doesn't exists create it !
#@ ------------------------------------------------------------
if ( ! @file_exists($cache_dir.$thumb_file_md5.$image_file_extension) ) {
    ## Get infos on file with exif
    $image_infos     = @getimagesize($image_file);
    $width_original = $image_infos[0];
    $height_original = $image_infos[1];
    ## Detect Portait( => 0) / paysage ( => 1)
    if ( $width_original <= $height_original ) {
        $image_type = 0;
    } else {
        $image_type = 1;
    }
    ## Define best size to thumb depending params
    if ( $image_type == 0 ) {
        $best_height     = $height;
        $best_width     = (int) ( $width_original * ($height / $height_original ) );
    } else {
        $best_width     = $width;
        $best_height     = (int) ( $height_original * ( $width / $width_original ) );        
    }
    ## If picture is little than wanted => don't stretch it, juste create a standard thumbnail
    if ( $width_original < $width && $height_original < $height ) {
        $best_width = $width_original;
        $best_height = $height_original;        
    }      
    ## Define image type and create image from
    switch ($image_infos['mime']) {
    case 'image/jpeg':
        $image_src = @imagecreatefromjpeg($image_file);
        break;
    case 'image/gif':
        $image_src = @imagecreatefromgif($image_file);
        break;
    case 'image/png':
        $image_src = @imagecreatefrompng($image_file);
        break;
    }    
    ## Create thumbnail
    $thumb = @imagecreatetruecolor($best_width, $best_height);
    ## Resize image_src in thumbnail
    @imagecopyresized($thumb, $image_src, 0, 0, 0, 0, $best_width, $best_height, $width_original, $height_original);
    ## Write file
    switch ($image_infos['mime']) {
    case 'image/jpeg':
        @imagejpeg($thumb,$cache_dir.$thumb_file_md5.$image_file_extension, 100);           
        break;
    case 'image/gif':          @imagegif($thumb,$cache_dir.$thumb_file_md5.$image_file_extension);            break;
    case 'image/png':
        @imagepng($thumb,$cache_dir.$thumb_file_md5.$image_file_extension);            break;
    }
    
    @ImageDestroy($thumb);  }  #@
#@ Display image
#@ ------------------------------------------------------------
$image_infos     = @getimagesize($cache_dir.$thumb_file_md5.$image_file_extension);
@header("Content-type: ".$image_infos['mime']);  echo @file_get_contents($cache_dir.$thumb_file_md5.$image_file_extension);
?>

Modifié par guiltouf, 24 August 2007 - 10:29 AM.


#5 shgamer

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3336 messages

Posté 24 August 2007 - 10:33 AM

Un fan des arobases assurément icon_mrgreen.gif

Il faut pas en abuser devant les fonctions, ça va surtout poser des problèmes de debug qu'autre chose.

#6 delarueguillaume

    Ceinture Blanche

  • Members
  • Pip
  • 10 messages

Posté 24 August 2007 - 10:39 AM

Code 100% fonctionnel !
C'est surtout pour éviter d'avoir des erreurs horribles sur le serveur de prod, même si ça a toujours fonctionné à merveille ! wink.gif

En tout cas, j'espère que ça pourra répondre à la question de beniguane icon_biggrin.gif

Modifié par guiltouf, 24 August 2007 - 10:40 AM.


#7 shgamer

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3336 messages

Posté 24 August 2007 - 10:50 AM

Dac, je pense quand même qu'il vaut mieux privilégier un error_reporting ou la directive display_errors dans le fichier ini.

#8 beniguane1327245778

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 493 messages

Posté 24 August 2007 - 14:54 PM

Merci à guiltouf et à Sol@rweb pour vos réponses.

La création d'image à la volée serait envisageable pour quelques sites sur 1 seul Serveur ... mais ce n'est pas possible malheureusement !

Je commence à me demander s'il y a une issue à ce problème ... icon_cry.gif

#9 ami.ladh

    Ceinture Blanche

  • Members
  • Pip
  • 13 messages

Posté 12 September 2007 - 18:51 PM

CITATION(beniguane @ Aug 24 2007, 01:54 PM) Voir le message
Merci à guiltouf et à Sol@rweb pour vos réponses.

La création d'image à la volée serait envisageable pour quelques sites sur 1 seul Serveur ... mais ce n'est pas possible malheureusement !

Je commence à me demander s'il y a une issue à ce problème ... icon_cry.gif


Une solution est de créer une copie miniature (php) à l'upload des images, et que dans l'éditeur il ne soit possible d'insérer que les miniatures ( avec un agrandissement par clic - href, popup, mootools, bref peu importe la méthode).
J'avais du procéder de cette façon afin que les utilisateurs n'exagèrent pas avec les images ( cas classique : le client insère une image gigantesque qu'il réduit - laborieusement - dans le wysiwyg, puis vient râler en raison de la lenteur de l'affichage icon_mrgreen.gif )



#10 delarueguillaume

    Ceinture Blanche

  • Members
  • Pip
  • 10 messages

Posté 17 September 2007 - 09:28 AM

Donc en gros, tu peux reprendre mon thumb.php et uniquement enlever le header et le echo à la fin.
=> Comme ça, lors de ton upload d'images, tu fais un include de thumb.php, tu génères ainsi les images en cache et plus de soucis pour afficher les vignettes !

NB: j'ai mis le fichier thumb.php en PJ

Fichier(s) joint(s)

  • Fichier joint  thumb.php   3.3 Ko   28 téléchargement(s)

Modifié par guiltouf, 17 September 2007 - 09:29 AM.




1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)