Créée le, 19/06/2015

 Mise à jour le, 19/05/2019

Visiteurs N°  




Accueil
Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique Site en Français Site en Anglais
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème livre d'Or

Signets :
  Leçons suivantes        Leçons précédentes     Bas de page
  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet


Génération d'images via PHP (1ère partie) :



Une des particularités très utiles de PHP est de permettre la création d'images "à la volée". PHP offre des fonctions prédéfinies de création et de manipulation d'image. Vous pouvez également utiliser la bibliothèque de fonctions spécialisées GD pour créer de nouvelles images ou manipuler des images existantes. Cette leçon explique comment tirer parti des fonctions PHP de génération d'images pour obtenir des effets intéressants et utiles.

Nous illustrerons nos propos par deux exemples : un script de génération à la volée de boutons de sites Web, ainsi qu'un script de génération d'un graphe à barres à partir de données numériques stockées dans une base de données MySQL.

Création d'images :

Les quatre étapes fondamentales de la création d'une image via un script PHP sont les suivantes :

  1. Création d'une image-canevas sur laquelle qu'on peut travailler.
  2. Dessin de formes ou impression de texte sur un canevas.
  3. Génération de l'image finale.
  4. "Nettoyage" des ressources.

Nous allons commencer notre étude en considérant un script simple de création d'une image. Ce script est donné au Linsting 1.

Listing 1. - Image_Simple_Canevas.php - Génération d'une image contenant une ligne et le mot Image Graphique :


Le résultat de l'exécution de ce script est montré à la figure 1.


Image_Simple_Canevas.png

Nous attirons votre attention que cette image est délicate à être affichée sur certains navigateurs, le code PHP doit être en première ligne (<?PHP), afin que le script puisse fonctionner et évitez de mettre les balises HTML avec le code PHP dans ce cas précis.

Pour visualier l'aperçu, en cliquant ici. [Exemple 1]

Nous allons examiner, en détail chacune des étapes de la création de cette image.

Image-canevas :

Pour commencer l'élaboration ou la modification d'une image via un script PHP, il est nécessaire de créer un identificateur d'image. Pour cela, deux possibilités sont envisageables. La première est de créer un canevas blanc, au moyen de la fonction ImageCreate(), comme dans le script du Listing 1 :

    $Image = ImageCreate($Largeur, $Hauteur) ;

La fonction ImageCreate() prend deux paramètres : le premier est la largeur de la nouvelle image, tandis que le second est sa hauteur. Elle renvoie un identificateur pour la nouvelle image (un identificateur d'image s'apparente beaucoup à une poignée sur un fichier).

La seconde possibilité de création d'image consiste à lire dans un fichier graphique existant, pour ensuite effectuer des opérations telles qu'un filtrage, un redimensionnement, ou des ajouts. Pour cela, vous pouvez utiliser l'une des fonctions ImageCreateFromPng(), ImageCreateFromJpeg() ou ImageCreateFromGif(), selon le format de l'image à lire. Chacune de ces fonctions prend le nom du fichier à lire comme argument, par exemple :

    $Image = ImageCreateFromPng("baseImage.png") ;

Nous verrons plus loin un exemple de mise en œuvre de ces fonctions lorsque nous utiliserons des images existantes pour créer des boutons à la volée.

Dessin ou impression de texte dans une image :

Le dessin ou l'impression de texte dans une image s'effectue réellement en deux étapes.

Tout d'abord, vous devez sélectionner les couleurs avec lesquelles vous voulez dessiner. Comme vous le savez probablement déjà, les couleurs affichées sur l'écran d'un ordinateur sont constitées de quantités bien définies de rouge, de vert et de bleu. Les formats graphiques reposent sur l'utilisation d'une palette des couleurs qui se compose d'un sous-ensemble spécifique de l'ensemble de toutes les combinaisons possibles des trois couleurs rouge, vert et bleu. Pour pouvoir utiliser une couleur particulière dans une image, cette couleur doit figurer dans la palette de l'image.

Pour sélectionner les couleurs d'une image, il faut appeler la fonction ImageColorAllocate(). Celle-ci prend comme paramètres l'identificateur de l'image à traiter, puis les montants de rouge (R), de vert (G) et de bleu (B) de la couleur à sélectionner.

Dans le Listing 1, deux couleurs sont utilisées : le noir et le blanc. Les appels correspondants de la fonction ImageColorAllocate() doivent être formulés de la manière suivante :

    $Blanc = ImageColorAllocate($Image, 255, 255, 255) ; // Couleur du trait diagonal "RGB"

    $Couleur = ImageColorAllocate($Image, 0, 0, 0) ; // Couleur de fond "RGB"

La fonction ImageColorAllocate() renvoie un identificateur de la couleur $Image, qui peut être ensuite utilisé pour accéder à la couleur.

Pour la deuxième étape de dessin d'une image, différentes fonctions sont utilisables selon le motif à dessiner (des lignes, des arcs, des polygones ou du texte).

Les fonctions de dessin offertes par PHP requièrent généralement les paramètres suivants :

L'exemple considéré ici (voir le Listing 1), fait appel à trois des fonctions de PHP de dessin. Examinons chacune de ces fonctions.

Tout d'abord, le code peint un fond noir, au moyen de la fonction ImageFill() :

    ImageFill($Image, 0, 0, $Couleur) ; // X et Y = 0

La fonction ImageFill() prend respectivement comme argument l'identificateur de l'image ($Image), les coordonnées de départ de la zone à peindre (x et y), ainsi que la couleur de remplissage ($Couleur).


Pour information : les coordonnées de l'image sont spécifiées par rapport au coin supérieur gauche, défini par x = 0, y = 0. Le coin inférieur droit de l'image est défini par les coordonnées x = $Largeur, y = $Hauteur. Les conventions utilisées ici sont donc l'inverse des conventions graphiques habituelles !


Le code trace ensuite un trait qui part du coin supérieur gauche (0,0) jusqu'au coin inférieur droit de l'image ($Largeur, $Hauteur) :

    ImageLine($Image, 0, 0, $Largeur, $Hauteur, $Blanc) ; // Tracé d'une ligne diagonale

La fonction ImageLine() prend comme paramètres l'identificateur de l'image ($Image), le point de départ (x = 0 et y = 0) du trait, le point final ($Largeur, $Hauteur), puis la couleur ($Blanc).

Pour finir, le code ajoute une légende au graphe :

    ImageString($Image, 4, 50, 220, "Image Graphique", $Blanc) ; // Déplacement du texte Image

La fonction ImageString() prend des arguments légèrement différents de ceux des fonctions précédentes. Le prototype de cette fonction est le suivant :

    int ImageString (int $Image, int police, int x, int y, String Image Graphique, int Color)

Cette fonction prend comme paramètres l'identificateur de l'image ($Image), la police (4) les coordonnées (x = 50 et y = 220) du point final d'écriture du texte, le texte à écrire (Image Graphique), la couleur ($Blanc).

La police est spécifiée sous la forme d'un chiffre compris entre 1 et 5. Ces chiffres désignent des polices prédéfinies dans PHP. Vous pouvez également avoir recours à des polices TrueType ou PostScript, via les bibliothèques correspondantes. A chacun de ces jeux de police est associé un jeu de fonctions PHP correspondant. Dans le prochain exemple, nous utiliserons des fonctions TrueType.

L'usage des jeux de fonctions précédemment mentionnés serait dans ce cas judicieux, pour contrer l'effet de crénelage du texte : en effet, les fonctions telles que ImageString() et ImageChar() produisent un texte "aliasé" (crénelé), tandis que les fonctions TrueType et PostScript produisent un texte anti-aliasé (lissé).

La figure ci-après, montre la différence entre la lettre A avec et sans anti-aliasing (lissage). Le texte non lissé présente des effets de crêtes dans les lettres, contrairement au texte lissé. Lorsqu'une image est soumise à un lissage, les pixels en couleurs entre le fond et le texte sont utilisés pour lisser l'apparence du texte et faire disparaître l'effet de "marches d'escalier".


Image_Aliase.png

La lettre (A) apparaît crénelée à gauche de la figure, notamment avec les caractères de grande taille. L'anti-aliasing (lissage) permet d'adoucir les courbes et les coins des lettres de cette même figure à droite, (A).

Génération de l'image finale :

Une image peut être générée et affichée soit directement dans le navigateur Web, soit dans un fichier.

Dans l'exemple du Listing 1, l'image est générée dans le navigateur. Le processus de génération se déroule en deux étapes. Tout d'abord, le navigateur Web doit être informé qu'une image lui est transmise, au lieu de texte ou de code HTML. Cette notification est implémentée avec la fonction Header(), en spécifiant le type MIME de l'image comme suit :

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

Normalement, le type MIME est la première information envoyée par le serveur Web au navigateur lorsque ce dernier sollicite un fichier. Dans le cas d'une page HTML ou PHP (post exécution), la première information envoyée est la suivante :

    Content-type: text/html

Cette expression informe le navigateur de la manière dont les données qui suivent doivent être traitées.

Dans le cas présent, le navigateur doit être notifié qu'une image lui est envoyée, au lieu de la sortie HTML habituelle.

La fonction Header() utilisée à cette fin transmet des chaînes d'en-tête HTML brutes. Elle peut également s'employer pour effectuer des redirections HTTP. Une redirection HTTP informe le navigateur que c'est une autre page qui doit être chargée, au lieu de la page requise. Les redirections HTTP sont typiquement mises en œuvre lorsque des pages Web sont déplacées. Par exemple :

    Header ("Location: http://www.electronique-et-informatique.fr/Nouvelle_Page_Accueil.html") ;

Concernant la fonction Header(), il est important de noter que cette fonction ne peut être exécutée si un en-tête HTTP a déjà été envoyé pour la page concernée. PHP envoie automatiquement un en-tête HTTP dès lors qu'une sortie est effectuée sur le navigateur. Par conséquent, si une balise PHP d'ouverture est précédée d'une instruction echo, voire d'espace blanc, les en-têtes sont envoyés, et PHP génère un message d'avertissement à l'appel de la fonction Header(). Toutefois, vous pouvez envoyer plusieurs en-têtes HTTP par de multiples appels de la fonction Header() implémentés dans le même script, à condition qu'ils apparaissent tous avant la sortie envoyée vers le navigateur Web.

Une fois que les données d'en-tête ont été envoyées, les données de l'image peuvent être transmises au navigateur via un appel de la fonction ImagePng() :

    ImagePng($Image) ;

Cette ligne de code envoie les données vers le navigateur au format PNG (Portable Network Graphics). Un autre format graphique aurait également pu être utilisé, en appelant la fonction ImageJpeg() (si le support JPEG est activé), JPEG signifie "Joint Photographic Experts Group", ou la fonction ImageGif() (avec une ancienne version de la bibliothèque gd), GIF signifie, "Graphics Interchange Format". Dans ce cas toutefois, il faut d'abord transmettre l'en-tête appropriée, c'est-à-dire :

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

ou :

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

La deuxième option envisageable pour générer l'image finale consiste à écrire l'image dans un fichier, et non pas dans le navigateur Web. Pour cela, il suffit de spécifier le nom du fichier comme second argument de la fonction ImagePNG() (ou d'une fonction similaire correspondant à un autre format graphique) :

    ImagePNG ($Image, $Nom_du_Fichier) ;

Dans ce cas, toutes les règles habituelles relatives à l'écriture dans des fichiers via PHP s'appliquent (par exemple, la nécessité d'ajuster correctement les permissions).

Nettoyage final :

Une fois que vous en avez terminé avec une image, il est nécessaire de renvoyer au serveur les ressources qui ont été utilisées, en supprimant l'identificateur de l'image. Ce nettoyage s'implémente au moyen de la fonction ImageDestroy(), comme suit :

    ImageDestroy($Image) ;

Utilisation d'images générées automatiquement dans d'autres pages :

Étant donné qu'un en-tête ne peut être envoyé qu'une seule fois, et qu'un en-tête constitue le seul moyen d'informer le navigateur que des données graphiques lui sont transmises, il est assez délicat d'incorporer dans une page normale des images créées à la volée. Pour ce faire, trois approches sont envisageables :

  1. Toute une page peut être consacrée à l'affichage de l'image (voir le Listing 1).
  2. L'image peut être écrite dans un fichier, comme nous l'avons précédemment mentionné. Une balise <IMG> normale permet ensuite d'y faire référence.

  3. Nous pouvons placer le script de génération de l'image dans une balise IMG.

Nous avons déjà traité les deux premières approches. Penchons-nous à présent d'un peu plus près sur la troisième approche.

Avec la troisième méthode, l'image est incluse en ligne dans du code HTML, avec une balise telle que :

    <img src = "Image_Simple_Canevas.php" alt = "Image_Simple_Canevas.php">


Listing 2. - Image_Simple_Canevas.html - Génération d'une image Graphique, en ligne avec du code HTML :


Pour visualiser l'aperçu, en cliquant ici. [Exemple 2].

Au lieu de placer directement une image PNG, JPEG ou GIF dans cette balise, nous spécifions dans la balise IMG le script PHP qui génère l'image. La figure 2 montre un exemple d'application de cette méthode.


Image_Simple_Canevas_2.png

Nous terminons ainsi ce premier chapitre de cette leçon, et nous verrons dans le prochain, l'utilisation de Représentation graphique de données numériques.



  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet.   Haut de page
  Page précédente   Page suivante







Nombre de pages vues, à partir de cette date : le 23 MAI 2019

compteur de visite

    




Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web. 

Version du site : 10. 5. 14 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 19 MAI 2019.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en MAI 2019.