oujood.com

Création d'une image PNG avec PHP

Pour commencer nous allons prendre un exemple pour manipuler et modifier une image préexistante.

chercher |

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

Exemple :       Copier 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

Exemple :       Copier 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

Voir aussi nos tutoriel :

glisser et déplacer

Glisser et Déplacer

border-spacing

Spécifie la distance entre les frontières des cellules adjacentes

fonction quoted_printable_decode

Convertit une chaîne quoted-printable en chaîne 8 bits