Création d'une image PNG avec PHP

PHP cours tutorial

Exemple : Création d'une image PNG avec PHP

Pour commencer nous allons prendre un exemple pour manipuler et modifier une image préexistante.Ne vous en faites pas dans les cours suivants nous allons voir toute les fonctions en détail.

Vous aurez besoin de :

  • Une image au format png
  • Une page html pour appeler l’image
  • Une page php contenant le code pour créer et manipuler l’image

Cet exemple pourra nous servir pour créer un menu par exemple.

Je vous ai préparé l’image d’un bouton que vous pouvez télécharger( clique droit sur l'image et enregistrer sous) ici :Image d’un bouton

Télécharger l’image et mettez la dans un dossier que vous pouvez appeler bouton.png par exemple

Vous pouvez aussi utiliser une autre image si vous le souhaiter à condition qu’elle soit au format png.

Prenez votre éditeur préféré et créer une page html dans le même dossier que l’image du bouton comme suit :

Code de la page image.html

Sélectionner le code

  <html>
  <head>
  <title>Ma première image</title>
  </head>
  <body>
  <img src="image1.php?text=Theme 1">
  <br />
  <img src="image1.php?text=Theme 2">.
  </body>           
          
 

Puis créer la page image1.php dans le même dossier que l’image du bouton comme suit :

Code de la page image1.php

Sélectionner le code


  <?php
   
  header("Content-type: image/png");
  $string = $_GET['text'];
  $im     = imagecreatefrompng("bouton.png");
  $couleur = imagecolorallocate($im, 20, 20, 60);
  $px     = (imagesx($im) - 20* strlen($string)) / 2;
  imagestring($im, 6, $px, 18, $string, $couleur);
  imagepng($im);
  imagedestroy($im);   
  ?>            
          
 

Dans votre explorateur ouvrez la page image.html apprécier le résultat.

Explication du code :

Dans la page image.html nous affichons deux images .

Le script dans la page image1.php, prend la chaîne "texte" et l'inscrit sur le fond d'image appelé "bouton.png", puis l'affiche. C'est une méthode très pratique pour éviter de redessiner un nouveau bouton, dès que vous changez son texte. De cette façon, ils sont générés dynamiquement.

Mais comment ?

Et bien

1)  la 1éré ligne : header("Content-type: image/png") dit à php qu’il s’agit d’une image au format png.

2) La seconde $string est une variable qui prend le texte dans la chaîne "texte"(voir le chapitre sur les variables)

Par la méthode GET( voir le chapitre sur la méthode GET )

3) La troisième ligne crée une image à partir de l’image bouton.png en utilisant la fonction = imagecreatefrompng().

4) La quatrième ligne donne une couleur suivant la norme RBG au texte :

           

Réglage des couleurs de base:

$noir = imagecolorallocate($img, 0, 0, 0)
$blanc = imagecolorallocate($img, 255, 255, 255)
$rouge = imagecolorallocate($img, 255, 0, 0)
$vert = imagecolorallocate($img, 0, 255, 0)

$bleu = imagecolorallocate($img, 0, 0, 255)

Changez les valeurs ($im, 20, 20, 60) pour voir le résultat.

5) La cinquième ligne nous avons fait un petit calcule pour positionner notre texte horizontalement.

Dans ce calcule nous avons utilisé les fonction suivante que nous aurons l’occasion de voir plus en détaille dans les chapitre à venir :

  • imagesx() : donne la longueur de l’image
  • strlen() : donne la longueur de notre texte

La formule du calcule est : (imagesx($im) moins  20 fois  strlen($string))  diviser par  2

Changez les valeurs 20 et/ou 2 pour voir le résultat.

6) La sixième ligne une autre fonction qui va dessiner le texte sur l’image horizontalement

imagestring ( source de l’image  , taille de la police entier , position verticale , position horizontale , le texte , couleur )

imagestring($im, 6, $px, 18, $string, $couleur);

7) la septième ligne une fonction qui envoie l’image PNG vers le navigateur ou un fichier

8) et en fin la huitième ligne pour libérer la mémoire .

Nous aurons l’occasion de voir toute ces fonction en détaille par la suite.


Par carabde 20 Aout 2014

  • Trafic Booster
    hebergement web

    SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Balise optgroup

    Définit un groupe d'options liées dans une liste déroulante

    Les boucles while javaScript

    Les boucles while js : La boucle While exécute un bloc de code spécifié un nombre de fois , tant que la condition spécifié est vrais (true).

    Balise embed

    Définit un conteneur pour une application externe (non HTML)



    Rentabilisez efficacement votre site