Dessiner dans une image avec PHP

Navigation: Pages Webmaster > Programmation


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.


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



Enseigne de boucherie


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 reé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



Enseigne de boucherie



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


Enseigne de boucherie



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)



Enseigne de boucherie



Article écrit par Janol le 23/02/2010
(Hits 4099
- Catégorie : Programmation)

Faites passer - Imprimer
Partagez cette page :



Commentaires

Cet article n'a pas encore été commenté.
Vous pouvez vous exprimer en remplissant le formulaire ci-dessous.


Autres publications Programmation

Améliorer Adsense via les annonces texte ou images
(Ecrit le 11/03/2012 - 3.560 lectures)
Google Adsense propose pour les pages web deux formats d'annonces et incite à utiliser le format image, quelles sont les améliorations à apporter.

Url en bit.ly sous ajax
(Ecrit le 15/03/2010 - 3.688 lectures)
Autre manière de calculer une url courte de type bit.ly et de profiter des traitements asynchrones possibles avec ajax

Optimiser l'API bit.ly pour un affichage plus rapide des pages
(Ecrit le 08/03/2010 - 3.750 lectures)
Bit.ly est le site permettant de raccourcir une url, et dont l'API permet de raccourcir à la volée. Hélas cette api peut ralentir l'affichage des pages, voyons comment intégrer l'API et afficher ses pages aussi vite qu'avant.

Intégrer l'API bit.ly pour twitter
(Ecrit le 06/03/2010 - 6.163 lectures)
Twitter, le réseau social, peut être alimenté par des articles de site web et efficacement lorsque les url ont été raccourcies. Voyons alors comment générer à la volée des url avec bit.ly et ce grâce à l'API proposée.

Ecrire dans une image à la volée
(Ecrit le 22/02/2010 - 4.252 lectures)
Le langage PHP permet d'écrire dans une image à la volée afin par exemple d'y ajouter un texte en superposition. Cette fonction permet également de masquer l'url de l'image puisque crée par le serveur.

Redimensionner photo pour le web mobile
(Ecrit le 15/02/2009 - 5.398 lectures)
Le web mobile ne peut permettre de charger des images de grande résolution. Il convient de les redimensionner. Pour ce faire utilisons PHP avec la bibliothèque GD, script en ligne.

Passer au web version mobile
(Ecrit le 09/02/2009 - 8.063 lectures)
Comment procéder pour écrire son site en version mobile pour smartphone, pda ou téléphone mobile avec wap. Voyons comment appliquer un template dédié pour le web sur mobile.

Structure pour web mobile
(Ecrit le 09/02/2009 - 6.658 lectures)
Les pages web pour téléphone mobile ou pour smartphone ne se construisent pas de la même manière que pour un site web avec navigateur classique. Quelques limitations sont à prendre en compte, voyons ces points.

Faut il externaliser ses scripts
(Ecrit le 09/12/2008 - 4.673 lectures)
Pour obtenir des temps de réponses corrects et si possible optimum, tout webmaster doit se poser la question de savoir si il faut externaliser les scripts d'un site web.

Reseau Social Friend connect
(Ecrit le 05/12/2008 - 4.238 lectures)
Google ouvre son réseau social Friend Connect aux autres plateforme et permet d'installer cet outil très facilement sur un site web.

Feuilles de styles statiques
(Ecrit le 09/11/2008 - 3.399 lectures)
Les feuilles de style dynamiques ne sont pas une bonne solution du coté de l'optimisation des pages web

Optimiser ses scripts
(Ecrit le 05/10/2008 - 3.283 lectures)
YSLOW propose de positionner ses scripts correctement dans ses pages web pour améliorer la vitesse de chargement.

Optimiser la lecture des feuilles de style
(Ecrit le 01/10/2008 - 2.645 lectures)
Cinquième règle YSLOW pour optimiser son site web : positionner les feuilles de styles correctement dans la page web.

YSLOW : composant compressé
(Ecrit le 20/09/2008 - 3.362 lectures)
Règle quatre pour optimiser les temps de réponse du serveur : compresser les composants de la page coté serveur.

Yslow : les pages dynamiques ou statiques sont persitantes
(Ecrit le 12/09/2008 - 2.975 lectures)
Règle numéro trois pour optimiser les temps de réponse du serveur : rendre persistantes ses pages web, qu'elles soient statiques ou dynamiques.

YSLOW : Réduire le nombre de requêtes
(Ecrit le 31/08/2008 - 4.327 lectures)
Règle numéro un pour optimiser les temps de réponse du serveur : minimiser le nombre de requêtes.

Améliorer la vitesse d'un site coté serveur
(Ecrit le 30/08/2008 - 4.012 lectures)
Après avoir optimisé le code des pages coté client, il reste à voir ce que l'on peut faire coté serveur, Yslow nous aide en ce sens

GoogleEarth kml et flux rss
(Ecrit le 20/06/2008 - 4.040 lectures)
Les flux rss permettant de lire de diffuser le contenu d'une page web sur un site, peuvent être utilisés pour lire un fichier Google Earth dont le contenu évolue.

Annuaire thématique cartographié
(Ecrit le 05/12/2007 - 10.677 lectures)
Carte des sites web de l'annuaire thématique avec géolocalisation et plan des villes.

Adapter son site à la résolution d'écran
(Ecrit le 23/11/2007 - 15.668 lectures)
Comment rendre son site lisible en 800 x 600 comme dans les grandes résolutions avec utilisation des balises div

L'API Google Maps Xml et Ajax sont sur un site web
(Ecrit le 19/11/2007 - 11.997 lectures)
Utiliser un flux xml pour afficher des données sur une carte Googlemaps

Intégrer l'API Google Maps
(Ecrit le 18/01/2006 - 80.953 lectures)
Présentation des éléments permettant de réaliser une intégration de l'API GoogleMaps sur un site web.

Software 2.0 - Programmation en Java
(Ecrit le 04/04/2005 - 7.846 lectures)
Le sujet principal de Software 2.0 4/2005 (6) : Programmation en Java



Tutoriels Webmaster

Scripts :

Internet a deux caractéristiques principales : Cela Bouge beaucoup et cela bouge vite. Le webmaster se doit d'être actif, voire réactif, et de disposer de l'information rapidement. Un simple script en python peut l'aider.


Scripts :

Comment contrôler visuellement que l'affichage de différentes pages web se fait correctement avec les différentes configurations de navigateur, et résolution d'affichage. Le Webdriver de Sélénium permet via un script d'automatiser la captures de telles pages, pour contrôler en un coup d'oeil le résultat.


Conception :

Optimiser un site web avec du responsive design est un pas de plus fait vers l'utilisateur final
Pour autant, si une page du site a un poids de plusieurs méga, l'utilisateur risque, si il est sur un téléphone mobile, de partir avant que la page ne soit complétement chargée.


Outils :

Comment gérer les erreurs 404 not found sur le fichier browserconfig.xml, alors que celui ci est demandé par le navigateur.


Scripts :

Les feuilles de style d'un site web permettent d'adapter l'affichage à la taille de l'écran. Voyons comment faire pour un site qui s'affiche aussi bien sur un ordinateur, une tablette qu'un téléphone intelligent (smartphone).


Scripts :

L'attribut Placeholder, permettant en HTML5 de renseigner le label d'un champs input, ne fonctionne pas sous Internet Explorer. Voici un script JavaScript simple et efficace à insérer pour contourner ce manque de fonctionnalité.


Sécurité :

Poster un spam sur un forum est pour certains acteurs du web un exercice amusant. Pour d'autres c'est un moment de réflexion obligatoire pour éviter de se faire spammer.
Voyons quelles sont les solutions pour éliminer les posts des spameurs tout en gardant ceux des internautes.


Qualité :

Si il est préférable de faire un tweet lisible, voyons comment faire pour le générer de manière automatique à partir d'un article.


Pages webmaster Ajoutez à votre page Google

Projet Web NTIC


Annuaire


Thèmes Phortail