Glisser et Déplacer
Pour commencer nous allons prendre un exemple pour manipuler et modifier une image préexistante.
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 :
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 :
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.