Hébergement du site en PHP et Mysql par WDMédia-hébergement
Vous aussi adpotez les éléPHPants de Vincent Pontier !  
CONCOURS
 
 
PLUS DE PHP
 
 
PLUS DE JAVASCRIPT
 
COMMENT CA MARCHE
 
 
EXPLIQUE-MOI
 
 
NEWS LETTER
 

 
PARTENAIRES
 
Découvrez scriptsphp.org
Découvrez phpteam.net
Tout sur les expressions régulières
IE sucks :-)
 
DESIGN DU SITE
 
Images dynamiques
Tuto écrit par Nykoh , revu en août 2004 par Molokai et Raf

Prérequis: Les bases du PHP, quelques notions élémentaires sur les images.

Objectifs: apprendre à se servir des différentes fonctions de la librairie pour générer dynamiquement des images.

La librairie GD est un ensemble de fonctions relatives aux images. Il est ainsi possible de créer ses propres images dans un script, mais aussi d'obtenir des informations sur des images existantes, les redimensionner, etc...

Attention: Avant de commencer, il faut vérifier un certain nombre de choses. En effet, cette extension de PHP existe dans plusieurs versions, et les hébergeurs choisissent parfois de désactiver certaines fonctions voire même la librairie GD dans son intégralité. Pourquoi ? Tout simplement car le traitement d'images est assez lourd pour le serveur !

Il vous faudra donc vérifier quelle est la version installée chez votre hébergeur favori et quelles sont les fonctions activées. Première information importante : le phpinfo. Pour cela éxécutez le script :

phpinfo.php

<?php
    phpinfo
();
?>

Si dans le listing vous obtenez un tableau similaire à celui-ci, alors vous pouvez continuer, surtout si la version est supérieure à 2.0.

gd

GD Supportenabled
GD Version2.0 or higher
FreeType Supportenabled
FreeType Linkagewith freetype
JPG Supportenabled
PNG Supportenabled
WBMP Supportenabled

Comme on le disait précedemment, certaines fonctions peuvent avoir été désactivées. Dans ce cas, le plus simple est encore d'essayer... Si vous obtenez l'erreur:
Fatal error: Call to undefined function
Vous saurez pourquoi !



I) Créer une image vide

    Avant tout, il faut commencer par une image vide. Dans tout le tutoriel, nous parlerons uniquement d'images PNG et JPG, mais pas de GIF... en effet le format GIF qui n'était plus supporté par la librairie GD depuis sa version 1.3. a été réintroduit dans la version 2 mais avec des restrictions.
    Conclusion: le PNG remplacera (avantageusement) le GIF.

    Remarque importante : dans tous les cours de phpdebutant, les scripts avaient toujours pour objectif de générer dynamiquement des pages HTML. Dans le cas de la GD, on doit générer cette fois des images, oubliez donc les appels à echo ou print ! Par défaut, un script PHP génère une page HTML, inutile de le préciser. Dans le cas d'une image, par contre, il faut le préciser au début du script en indiquant le type d'image générée, comme par exemple PNG :

    header ("Content-type: image/png");

    Ensuite, le fonctionnement global est assez similaire à celui d'un logiciel d'images. Vous créez une nouvelle image en choisissant ses dimensions, vous choisissez une couleur de fond et vous l'enregistrez dans le format que vous désirez.
    Ce qui donne en PHP le script suivant:

    imagevide.php

    <?php
        header 
    ("Content-type: image/png");
        
    $im ImageCreate (200100)
                or die (
    "Erreur lors de la création de l'image");        
        
    $couleur_fond ImageColorAllocate ($im25500);
        
    ImagePng ($im);
    ?>

    Voici en très peu de lignes un script qui génère un rectangle rouge (ce n'est pas grand chose mais c'est un bon début). Quelques explications tout de même:

    • L'appel à la méthode ImageCreate renvoie une ressource nommée $im. Cela correspond à l'image en cours de réalisation, la variable $im devra être passée à toutes les fonctions de dessin. Les paramètres de la fonction ImageCreate correspondent respectivement à la largeur et à la hauteur de l'image à créer (ici 200x100).
    • Il peut être utile d'intercepter une erreur, c'est la tâche de or die.
    • On crée ensuite une couleur via la fonction ImageColorAllocate. Cette fonction à deux objectifs:
      • Elle crée une couleur stockée dans une variable pouvant être réutilisée ultérieurement
      • Elle enregistre cette couleur dans la palette de l'image $im
      Les paramètres correspondent aux composantes Rouge, Vert et Bleu, qui sont trois valeurs comprises entre 0 et 255. On a donc créé ici une couleur rouge.
    • Important: Cette couleur étant la première à être enregistrée dans la palette de l'image, elle correspondra à la couleur de fond.

    Un appel au script imagevide.php va donc générer une image PNG. Pour intégrer celle-ci à votre site web, procédez de la même façon que pour une image classique:

    <img src="image.php">

    Tout simplement ! Vous pouvez même passer des paramètres au script qui va générer l'image (la couleur de fond par exemple, que vous n'oublierez pas de récupérer dans votre script image.php en suivant les autres tutos) :

    <img src="image.php?couleur=bleu">

    Voila, vous avez la base pour dessiner. Si vous voulez approfondir ces quelques notions, voici quelques fonctions intéressantes:

    • Vous pouvez remplacer ImageCreate par ImageCreateTrueColor pour créer une image 32 bits (idéal pour des photos)
    • Vous pouvez remplacer ImagePng par ImageJPEG pour créer une image JPEG (n'oubliez pas de changer le header en header("Content-type: image/jpeg"))
    • On verra dans le deuxième exemple qu'il est possible de sauvegarder l'image ainsi générée sur le serveur.



II) Les fonctions de dessin

    Tout d'abord, qui dit dessin en informatique, dit coordonnées. Voici donc le (petit) passage matheux du tutoriel...
    Le coin superieur gauche de l'image est aux coordonnées (x=0, y=0), le coin inférieur droit est (x=largeur_image, y=hauteur_image).
    Par exemple, pour une image de 200 par 100 points, on a :

    Pour dessiner vous aurez donc à donner des coordonnées aux différentes fonctions.
    Prenez l'habitude de respecter l'ordre des coordonnées. Par exemple, pour dessiner un rectangle, il faudra donner deux points à la fonction correspondante. Le premier doit correspondre au coin supérieur gauche du rectangle et le deuxième au coin inferieur droit. Evitez de faire l'inverse car certaines fonctions donneront des resultats érronés.

    Voici une liste de fonctions pour dessiner toutes sortes de formes ou placer du texte sur votre image nouvellement créée.
    Pour chaque fonction, vous trouverez une courte description, sa syntaxe et un lien vers la documentation officielle.
    L'objectif n'est pas ici de donner un exemple pour chaque fonction, mais plutôt une explication rapide. La version de la librairie à partir de laquelle une fonction est implémentée est également spécifiée.
    Certaines de ces fonctions seront utilisées dans le III.

    Syntaxe avec lien vers la doc.VersionDescription
    $im = ImageCreate ($largeur, $hauteur) Toutes Crée une image vide (256 couleurs) $im de largeur $largeur et de hauteur $hauteur. (Utiliser de préférence le format PNG)
    $im = ImageCreateTrueColor ($largeur, $hauteur) 2.0.2 Idem à ImageCreate mais l'image n'est plus limitée à 256 couleurs. (Utiliser de préférence le format JPEG)
    $col = ImageColorAllocate ($im, $rouge, $vert, $bleu) Toutes Place dans la variable $col une couleur dont les composantes sont $rouge, $vert, $bleu (compris entre 0 et 255).
    Voir la partie I pour plus de détails.
    ImageEllipse ($im, $x, $y, $l, $h, $col) 2.0.2 Dessine dans l'image $im une ellipse en partant du point ($x,$y), de largeur $l, de hauteur $h et de couleur $col.
    ImageFilledEllipse ($im, $x, $y, $l, $h, $col) 2.0.2 Idem à ImageEllipse mais l'ellipse est remplie par la couleur $col
    ImageFill ($im, $x, $y, $col) Toutes Colorie dans l'image $im avec la couleur $col un rectangle placé entre ($x,$y) et le coin inférieur droit de l'image.
    ImageLine ($im, $x1, $y1, $x2, $y2, $col) Toutes Trace dans $im une ligne de couleur $col entre les points ($x1,$y1) et ($x2,$y2)
    ImagePolygon ($im, $points, $num_points, $col) Toutes Trace un polygone dans $im dont la liste des points est donnée dans le tableau $points ($points[0]=$x0, $points[1]=$y0, $points[2]=$x1, $points[3]=$y1, etc...), $num_points est le nombre de points dans le tableau et $col la couleur.
    ImageFilledPolygon ($im, $points, $num_points, $col) Toutes Idem à ImagePolygon mais le polygone est rempli par la couleur $col
    ImageRectangle ($im, $x1, $y1, $x2, $y2, $col) Toutes Trace dans $im un rectangle de coin supérieur gauche ($x0, $y0) et de coin inférieur droit ($x1, $y1) de couleur $col
    ImageFilledRectangle ($im, $x1, $y1, $x2, $y2, $col) Toutes Idem à ImageRectangle mais le rectangle est rempli par la couleur $col
    ImageSetStyle ($im, $style) ImageSetBrush ($im, $brush) 2.0.2 Ces fonctions permettent de changer le style de tracé des lignes, consultez la documentation officielle et surtout l'exemple pour la fonction ImageSetStyle qui montre également comment utiliser ImageSetBrush
    ImageSetPixel ($im, $x, $y, $col) Toutes Dessine dans $im un point de coordonnées ($x,$y) et de couleur $col
    ImageSetThickness ($im, $epaisseur) Toutes Change l'epaisseur des lignes tracées par toutes les fonctions.
    ImageString ($im, $police, $x, $y, $chaine, $col) Toutes Dessine dans $im la chaîne de caractère $chaine à partir du point ($x,$y) avec la couleur $col et avec la taille de police de caractère $police (compris entre 0 et 5)
    ImageStringUp ($im, $police, $x, $y, $chaine, $col) Toutes Idem à ImageString mais la chaîne de caractères est dessinée verticalement



III) Un premier exemple : graphique des visiteurs

    Pour appliquer ces quelques notions, voici un premier exemple assez simple. On desire pouvoir générer un histogramme (graphique sous forme de "batons") représentant le nombre de visites sur votre site web sur les 12 mois de l'année.

    On supposera que vous avez déjà réalisé la partie comptabilisation des visites (dans une table MySQL par exemple), on ne s'y étendra pas ce n'est pas le but du tutorial. Imaginons donc que le nombre de visites pour chacun des 12 mois est placé dans le tableau $visites. Ici ce tableau sera remplis "à la main", mais ce serait à vous de le remplir en fonction de votre table MySQL.

    a) Les visites, l'image et les couleurs

    On commence donc par créer un tableau contenant les visites sur 12 mois (donc 12 valeurs).
    On crée ensuite une image 400x300 et on crée trois couleurs, dont la première (le blanc) sera la couleur du fond.

    visites.php

    <?php 
        $visites 
    = array(138254381652896720140556663331407768);

        
    header ("Content-type: image/png"); 
        
    $largeurImage 400;
        
    $hauteurImage 300;
        
    $im ImageCreate ($largeurImage$hauteurImage
                or die (
    "Erreur lors de la création de l'image");         
        
    $blanc ImageColorAllocate ($im255255255); 
        
    $noir ImageColorAllocate ($im000);  
        
    $bleu ImageColorAllocate ($im00255);        
        

    b) On dessine les axes

    On place l'axe vertical du temps (un simple trait noir) en bas de l'image, en laissant une marge de 10 points.
    On écrit en dessous le numéro de chacun des mois en utilisant une simple boucle for et la fonction ImageString. Les numeros de mois sont placés tous les 30 points en partant de la gauche de l'image.
    Enfin on trace un trait vertical représentant l'axe vertical du nombre de visites.


        // on dessine un trait vertical pour représenter l'axe du temps    
        
    ImageLine ($im10$hauteurImage-10$largeurImage-10$hauteurImage-10$noir);
        
    // on affiche le numéro des 12 mois
        
    for ($mois=1$mois<=12$mois++) {
            
    ImageString ($im0$mois*30$hauteurImage-10$mois$noir);
        }
        
        
    // on dessine un trait vertical pour représenter le nombre de visites
        
    ImageLine ($im101010$hauteurImage-10$noir);
        

    c) On dessine les batons

    Voici la partie un peu plus difficile au cours de laquelle on dessine les batons.
    Tout d'abord, il nous faut le nombre de visites maximal que nous aurons à tracer sur le graphe. Ici, la valeur est posée arbitrairement (1000), mais en réalité il faudrait la calculer en parcourant le tableau des visites à la recherche de son maximum, mais faisons simple...
    Pour chacun des mois, il faut calculer la hauteur du rectangle que l'on veut tracer. Pour cela on fait un produit en croix sachant que la hauteur du rectangle pour le nombre de visites maximum serait égale (pour simplifier) à la hauteur de l'image. A partir du nombre de visites pour un mois donné on en déduit la hauteur voulue.
    Il ne reste plus qu'à le tracer chaque rectangle, en commençant par son point supérieur gauche et en finissant par son point inférieur droit.
    Pour améliorer les choses, on ajoute le nombre de visites au dessus de chaque rectangle.


        // le nombre maximum de visites
        
    $visitesMax 1000;
        
        
    // tracé des batons
        
    for ($mois=1$mois<=12$mois++) {
            
    $hauteurImageRectangle round(($visites[$mois-1]*$hauteurImage)/$visitesMax);
            
    ImageFilledRectangle ($im$mois*30-7$hauteurImage-$hauteurImageRectangle$mois*30+7$hauteurImage-10$bleu);
            
    ImageString ($im0$mois*30-7$hauteurImage-$hauteurImageRectangle-10$visites[$mois-1], $noir);
        }
        
        
    // et c'est fini...
        
    ImagePng ($im); 
    ?> 

    d) Et voila !

    Bien sûr le résultat n'est pas superbe, mais on obtient quelque chose de présentable en une vingtaine de lignes, ce qui n'est pas si mal ni si difficile...



IV) D'autres fonctions utiles

    Voici une autre série de fonctions utiles, orientée cette fois vers la gestion des couleurs, et diverses informations sur les images.

    Syntaxe avec lien vers la doc.VersionDescription
    $tableau = GetImageSize ($fichier) Toutes A partir d'une image dans le fichier $fichier, cette fonction renvoie un tableau contenant les 4 éléments suivants:
    • $tableau[0] est la largeur de l'image
    • $tableau[1] est la hauteur de l'image
    • $tableau[2] donne le type de l'image (consultez la documentation pour la liste)
    • $tableau[3] donne une chaîne de caractère utilisable directement dans le tag HTML <IMG>
    ImageColorTransparent ($im, $col) Toutes Déclare la couleur $col de l'image $im comme couleur transparente. Tous les éléments tracés avec la couleur $col seront transparents. Pour garder la propriété de transparence vous devez utiliser le format PNG.
    ImageCopy ($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_l, $src_h) Toutes Copie une partie rectangulaire de l'image $src_im dans l'image $dst_im. La partie à copier est délimitée par le point ($src_x, $src_y), la largeur $src_l et la hauteur $src_h. La copie est placée dans $dst_im à partir du point ($dst_x, $dst_y)
    ImageCopyMerge ($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_l, $src_h, $intensite) Toutes Idem à ImageCopy mais en effectuant un fondu d'intensité $intensite (entre 0 et 100) entre l'image à copier et le fond actuel.
    ImageCopyResampled 2.0.2 Fonctionne de la même façon que ImageCopy mais en plus effectue un redimensionnement. Cette fonction est expliquée dans l'exemple qui suit.
    ImageCopyResized Toutes Idem à ImageCopyResampled mais le résultat du redimensionnement est moins propre mais plus rapide à effectuer.
    $im = ImageCreateFromJpeg ($fichier) Toutes Crée une image $im contenant l'image JPEG du fichier $fichier.
    $im = ImageCreateFromPng ($fichier) Toutes Crée une image $im contenant l'image PNG du fichier $fichier.
    $largeur = ImageSX ($im) Toutes Renvoie la largeur de l'image $im
    $hauteur = ImageSY ($im) Toutes Renvoie la hauteur de l'image $im



V) Deuxième exemple: générer des miniatures

    Dans cet exemple l'objectif est de créer la miniature d'une image existante. Vous pourriez avoir à programmer cette fonctionnalité pour une galerie de photos en PHP. Les photos de la galerie sont présentées sous la forme de vignettes sur lesquelles le visiteur peut cliquer pour agrandir.
    Ici nous allons donc générer une miniature avec un cadre et quelques informations comme le nom de l'image d'origine et ses dimensions.

    a) On prépare le tout...

    A la différence du premier exemple, ce script ne va pas générer directement une image, celle-ci sera écrite dans un fichier.
    Il n'est donc plus utile de spécifier un header(), le script redeviens "classique" et peut générer du HTML.
    On commence donc par créer une image vide de dimensions 200x150, on lit l'image existante avec la fonction ImageCreateFromJpeg. Pour la suite nous aurons également besoin des dimensions de l'image source, on utilise donc les fonctions imagesx et imagesy.

    miniature.php

    <?php 
        $fichierSource 
    "photo3.jpg";
        
        
    $largeurDestination 200;
        
    $hauteurDestination 150;
        
    $im ImageCreateTrueColor ($largeurDestination$hauteurDestination
                or die (
    "Erreur lors de la création de l'image"); 

        
    $source ImageCreateFromJpeg($fichierSource);
        
        
    $largeurSource imagesx($source);
        
    $hauteurSource imagesy($source);
        

    b) Le cadre

    Après avoir créé quelques couleurs, nous tracons le cadre. Pour faire simple, il s'agit d'un dégradé de gris concentrique.
    Pour le réaliser, une méthode simple consiste à tracer plusieurs rectangles imbriqués et de couleur différente. On commence par le plus grand (de la même taille que l'image) de couleur foncée. On superpose sur celui-ci un autre rectangle plus clair et légèrement plus petit, et ainsi de suite.
    L'épaisseur du cadre réalisé ici est de 8 points.


        $blanc ImageColorAllocate ($im255255255);
        
    $gris[0] = ImageColorAllocate ($im909090); 
        
    $gris[1] = ImageColorAllocate ($im110110110);        
        
    $gris[2] = ImageColorAllocate ($im130130130); 
        
    $gris[3] = ImageColorAllocate ($im150150150); 
        
    $gris[4] = ImageColorAllocate ($im170170170); 
        
    $gris[5] = ImageColorAllocate ($im190190190); 
        
    $gris[6] = ImageColorAllocate ($im210210210); 
        
    $gris[7] = ImageColorAllocate ($im230230230); 

        for (
    $i=0$i<=7$i++) {
            
    ImageFilledRectangle ($im$i$i$largeurDestination-$i$hauteurDestination-$i$gris[$i]);    
        }
        

    c) La miniature

    Pour créer la miniature on utilise la fonction ImageCopyResampled. Cette fonction copie une image dans une autre en procédant à un redimensionnement. C'est en quelques sortes un "copier-coller" intelligent...
    Cette fonction prend de nombreux paramètres, mais il sont évidents. Dans l'ordre:

    • L'image de destination ($im)
    • L'image source ($source)
    • La position sur l'axe horizontal de l'image de destination à partir de laquelle la copie sera placée (8 pour ne pas empieter sur le cadre)
    • Idem sur l'axe vertical (8)
    • La position sur l'axe horizontal dans l'image source (0 car on veut copier l'intégralité de l'image source)
    • Idem sur l'axe vertical (0)
    • La largeur de la copie dans l'image destination ($largeurDestination-(2*8) la largeur de l'image destination moins la largeur du cadre à gauche et à droite)
    • Idem pour la hauteur
    • La largeur de la partie à copier depuis l'image source ($largeurSource car on veut copier l'intégralité de l'image source)
    • Idem avec la hauteur
    Ceci fait, on en profite pour ajouter un petit texte d'information sur l'image.

    Attention: La fonction ImageCopyResampled est assez lourde au niveau du temps d'éxécution sur le serveur, n'en abusez pas !


        ImageCopyResampled($im$source8800$largeurDestination-(2*8), $hauteurDestination-(2*8), $largeurSource$hauteurSource);
        
        
    ImageString($im012$hauteurDestination-18"$fichierSource - ($largeurSource x $hauteurSource)"$blanc);

    d) Sauvegarde du résultat

    Il ne reste plus qu'à sauvergarder le résultat dans un fichier commençant par "mini_" gràce à la fonction ImageJpeg.
    Lorsque cette fonction n'a qu'un paramètre, elle envoie l'image au navigateur du visiteur. Par contre, si en deuxième paramètre elle a un nom de fichier, rien ne sera envoyé au navigateur, mais l'image sera sauvegardée. Ceci est également vrai pour ImagePng.


        $miniature "mini_$fichierSource";
        
    ImageJpeg ($im$miniature); 
        echo 
    "Image miniature générée: $miniature";
    ?>

    Et voilà le résultat "mini_photo3.jpg":



VI) FAQ et conclusion

    La librairie GD laisse de nombreuses possibilités mais qui sont parfois un peu trop gourmandes en temps d'éxécution pour la grande majorité des hébergeurs.
    Par ailleurs de nombreux scripts existent et permettent de réaliser certaines fonction encore plus facilement.

    Voici une petite série de questions-réponses sur les problèmes courants:

    Mon image n'apparaît pas, le navigateur se comporte comme si l'image était inexistante, pourquoi ?
    Vous avez très certainement une erreur dans votre script. Mettez en commentaire la ligne header("Content-type: image/png") (ou header("Content-type: image/jpeg") )et la ligne ImagePng($im) (ou ImageJpeg($im) ), pour laisser apparaitre l'erreur.

    Le script met beaucoup de temps à s'exécuter chez mon hébergeur, est-ce normal ?
    Si vous utilisez des fonctions "lourdes" comme ImageCopyResampled, ce n'est pas étonnant. Le serveur PHP de votre hébergeur a surement déjà beaucoup de travail...

    Mon image apparait en noir et blanc ou les couleurs sont fausées, pourquoi ?
    Vous avez certainement utilisé la fonction ImageCreate qui limite le nombre de couleurs à 256 puisqu'il s'agit d'une image indexée (palette de couleurs). Pour résoudre cette limitation, utilisez la fonction ImageCreateTrueColor à la place de ImageCreate.
    Conseils: avec ImageCreate, utilisez plutot le format PNG (meilleure qualité et petite taille). Avec ImageCreateTrueColor utilisez plutot le format JPEG pour diminuer le poids de l'image.

    Et pour terminer, voici le résultat que l'on peut obtenir en combinant les deux exemples vus dans ce tutoriel et en appliquant un dégradé sur les batons de l'histogramme de la même façon que le cadre de l'exemple 2:

Nykoh




Ajouter une réponse
Nom
Email
Titre

Mise en forme : gras = [b]...[/b], italic = [i]...[/i], souligné = [u]...[/u], citation = [quote]...[/quote], lien = [url]liens_externe[/url] ou [url nom=texte]liens_externe[/url], code source : [code]...[/code]

Mémoriser mon nom et mon email : Oui Non
www.phpdebutant.org © 2016 - L'équipe de phpDebutant - Hébergement : WDMédia-hébergement
DEBUTEZ !
 
  0.  Introduction
  1.  Afficher une phrase ou une image
  2.  Afficher la date et l'heure
  3.  PHP dans du code HTML
  4.  La concaténation
  5.  Récupérer les valeurs d'un formulaire
  6.  Les structures de contrôle
  7.  Ecrire et lire dans un fichier texte
  8.  Les fonctions utilisateurs
  9.  Les variables d'environnement
  10.  Quelques fonctions utiles
  11.  SQL/MySQL (Create, Alter & Drop)
  12.  SQL/MySQL (Insert et Select)
  13.  SQL/MySQL (Delete et Update)
  14.  SQL/MySQL (Where)
  15.  Fonctions PHP pour mySQL
  16.  Interroger une table MySQL
  17.  Alimenter une ou plusieurs tables mySQL
  18.  Les pseudos-frames
  19.  Les sessions php4
  20.  Affichage page par page
  21.  Images dynamiques
  22.  Ca marche pas ?
  23.  Variables globales à OFF
  24.  Les variables dynamiques