Contactez-nous

1

Réduire les dimensions d’une image selon un certain facteur

20 mars 2006
par ARNO*

[SPIP 1.8] Le filtre reduire_image a été conçu pour réduire les dimensions d’une image selon les dimensions maximales de l’image réduite. L’utilisation principale dans une page Web d’une telle réduction d’image a, en effet, généralement besoin de valeurs maximales :
— limiter les dimensions lors d’un affichage, pour éviter qu’une trop grande image fasse exploser la maquette ;
— forcer une des dimensions de vignettes alignées, de façon à obtenir un bel alignement (par exemple, si l’on place les vignettes les unes à côté des autres horizontalement, on voudra leur donner à toutes la même hauteur).

Mais dans certains cas, on voudra réduire les dimensions de l’image selon une certaine proportion. Par exemple : diviser les dimensions de l’image par 2. Les nouveaux filtres de la version 1.9 rendent assez souvent nécessaire le recours à une telle réduction :
— les images typographiques (image_typo) rendues dans des petites tailles sont généralement assez laides ; on pourra ici créer des images typographiques de taille double et les réduire par deux ;
— certains filtres, tels que la rotation (image_rotation), provoquent l’apparition d’effets d’escalier ; on pourra donc souhaiter réduire la taille d’une image après rotation pour réduire ces effets. Ainsi, dans notre exemple sur la création d’un timbre, après la rotation du timbre, nous préconisions de réduire les dimensions de l’image.

L’effet d’une réduction à plusieurs corps
Le filtre de réduction d’image appliqué à plusieurs tailles de caractères. Pour chacune des tailles, la version verte présente l’image typographique créée directement à la « bonne taille » ; la version noire est d’abord créée en taille double, puis réduite par deux.
À gauche, on voit que l’image qui vient de subir une rotation présente de très nets effets d’escalier. À droite, la réduction de l’image « lisse » l’image.

L’idée est donc de réduire l’image, sans connaître a priori ses dimensions (ce qui est le cas avec une image typographique, dont les dimensions dépendent du texte utilisé, et d’une image ayant subit une rotation). On veut ici effectuer la réduction selon un certain facteur, et non une dimension maximale.

Voici un filtre très simple pour réaliser cet effet :

  1. function image_diviser_par ($img, $val) {
  2. include_ecrire("filtres");
  3.  
  4. $l = round(largeur($img)/$val);
  5. $h = round(hauteur($img)/$val);
  6.  
  7. if ($l > $h) $h = 0;
  8. else $l = 0;
  9.  
  10. $img = reduire_image($img, $l, $h);
  11.  
  12. return $img;
  13. }

Télécharger

On peut l’appliquer à une image typographique ainsi :

  1. <div>[(#TITRE|image_typo{taille=12})]</div>
  2. <div>[(#TITRE|image_typo{taille=24}|image_diviser_par{2})]</div>

Télécharger

Le premier « rendu » demande directement à créer le titre en corps 12. Le second commence par demander le titre en corps 24, puis réduit l’image par deux, on revient donc à l’équilalent du corps 12. Selon la taille désirée et la police de caractères utilisés, on pourra choisir l’une ou l’autre méthode : souvent la version sans réduction, directement dans un petit corps, est un peu plus « nette », mais le dessin des caractères et les approches sont assez désastreux ; alors que la version rendue plus grande puis réduite est un peu plus « floue » (ou « lissée »), donc un peu moins lisible, mais beaucoup plus jolie.


Notez bien : ce filtre est désormais inclus en standard dans SPIP 1.9, sous le nom image_reduire_par.

  • karim
    Mars 2006

    salut, arno*

    question, super bete !

    Ce filre s’intregre dans mes_fonction.php ?

  • ARNO*
    Mars 2006

    Ce filre s’intregre dans mes_fonction.php ?

    Oui, c’est bien ça. Deux remarques à ce sujet :

    — à peu près tous les scripts que je fournis ici s’installent dans mes_fonctions.php (ou .php3 si version antérieure à 1.9), du coup je ne reprécise pas ;

    — remarque que, si tu installes tes squelettes dans un dossier (genre : /squelettes !), pense à installer également ton fichier mes_fonctions.php dans ce dossier plutôt qu’à la racine du site : ce sera plus simple à maintenir.

  • antoine
    Janvier 2008

    Bonjour arno*,

    tout d’abord bravo et merci pour toutes tes travaux sur SPIP.

    Je rencontre un bug avec image_reduire que je n’avais pas remarquer jusque la : sous IE7, le filtre n’a pas l’air de fonctionner, sous FF, c’est (bien sur) parfait.

    Ce probleme est visible sur la page d’accueil de mon site de test.

    Ca doit etre moi qui bug mais si quelqu’un pouvait m’expliquer...

  • se7en
    Août 2008

    Je connais ce bug pour l’avoir produit aussi.
    antoine, soit rassuré, il s’agit visiblement bien d’un problème d’IE7 uniquement. Donc ça doit pas être toi qui bug.

    En attendant après plusieurs heures de tests autour des CSS, toujours pas mieux ici : Me suis rabattu sur une image en dur en attendant (snif).

    Si qqun peut ronger l’os jusqu’au bout, je l’en remercie d’avance pour tous.

  • kris
    Septembre 2008

    Concernant le bug IE7 sur le filtre image_reduire : dans l’interface privée, sélectionner la librairie GD2 pour la création des vignettes, vider le cache image, et miracle...., ça marche ;-)

  • Novembre 2009

    réduire les dimensions des images et des écritures, même de la page d’accueil. ce défaut est apparu après un bug

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.