Projet Webmaster PHP

Portail Php

Dessiner dans une image avec PHP

Après avoir vu comment écrire dans une image, voyons comment dessiner dans une image puis écrire avec d'une part des polices de caractère et des couleurs, mais également des paramètres passés en variable.

Prenons cette image qui représente une enseigne de boucherie et qui nous servira comme exemple



Notez que cette image est gérée, comme nous l'avons vue précédemment, par un script php qui définit via l'entête que c'est une image. Le script nous permet d'en modifier l'affichage, le contenu. C'est ce que nous allons faire.

Dans la partie basse, nous pouvons réécrire le nom de la boutique, mais au préalable il faut repeindre le fond.

Nous pouvons dessiner un rectangle de couleur, mais comme le cadrage n'est pas parfait, un polygone sera plus précis.

Pour dessiner un polygone dans une image, l'instruction php est imagefilledpolygon et nécessite comme paramètres le nom de l'image, les valeurs de points, le nombre de points et la couleur. Les valeurs de points sont un simple tableau array.

Ce qui nous donne ceci pour notre image.

// Définition du content-type
header("Content-type: image/jpeg");

// Création de l'image
$im = imagecreatefromjpeg("images/boucherie.jpg");

// Création de quelques couleurs
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 67, 69, 66);
// Coordonnées du rectangle
$values = array(
50, 222, // Point 1 (x, y)
184, 225, // Point 2 (x, y)
183, 271, // Point 3 (x, y)
48, 268, // Point 4 (x, y)
);
// dessine le polygone
imagefilledpolygon($im, $values, 4, $grey );
imageJpeg($im);
imagedestroy($im);

Notre image devient alors comme ceci



Rajoutons alors le nom de la boutique avec l'instruction imagettftext
imagettftext($im, $ft, 0, $x, $y, $white, $font, $texte);
Ici les paramètres sont le nom de l'image, la taille de la police, l'orientation du texte, position x, position y, police de caractère et enfin le texte.

Notre script est modifié ainsi

// Définition du content-type
header("Content-type: image/jpeg");

// Création de l'image
$im = imagecreatefromjpeg("images/boucherie.jpg");

// Création de quelques couleurs
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 67, 69, 66);
// Définition du texte
$texte = 'Boucherie';
// Définition de la police et son chemin d'accès
$font = 'madscrwl.ttf';
// Position du texte et taille
$x=55;
$y=260;
$ft=30;
// Coordonnées du rectangle
$values = array(
50, 222, // Point 1 (x, y)
184, 225, // Point 2 (x, y)
183, 271, // Point 3 (x, y)
48, 268, // Point 4 (x, y)
);
// dessine le polygone
imagefilledpolygon($im, $values, 4, $grey );
// Ajout d'ombre au texte
imagettftext($im, $ft, 0, $x+2, $y-2, $black, $font, $texte);
// Ajout du texte
imagettftext($im, $ft, 0, $x, $y, $white, $font, $texte);
imageJpeg($im);
imagedestroy($im);

L'image s'affiche désormais comme ceci



A noter que l'image affichée ici est un script, celui là même décrit dans notre article permettant d'écrire dans une image

Un script permet donc de recevoir des paramètres, c'est ce que nous avons fait ici, ou de lire des variables, comme dans l'image suivante qui affiche notre panneau et la ville qui est géolocalisée avec votre connexion (selon précision de la géolocalisation)