Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > PHP > Langage, bibliothèques et fonctions > Importer des polices dans GD > Lecture du tutoriel

Importer des polices dans GD

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
 Auteur : hugotore
Difficulté : Amateur (2 / 5)
Visualisations : 2 606
Licence : Creative Commons BY-NC-SA


Plus d'informations Plus d'informations
Bonjour et bienvenue ! :D

Il a pour but de vous expliquer comment importer des polices dans GD, pour écrire du texte (sur des images ^^ ).
Cela vous changera du "serif" ou du "sans-serif".

C'est partii :lol: .

Il est impératif de lire la deuxième partie, car elle comporte toutes les explications. Après, vous pouvez aller à la partie dont vous avez besoin. Il y en a quatre, car il y a quatre combinaisons possibles. Les voici :
  • Création & affichage ;
  • Création & enregistrement ;
  • Chargement & affichage ;
  • Chargement & enregistrement.
Sommaire du tutoriel :
Icône du chapitre

Vérifier la version de PHP et activer GD

Il est très conseillé de lire le tuto GD de M@teo avant de vous lancer ici ;) .



Vérifier votre version de PHP



Ouvrez Notepad++ (ou un autre éditeur de texte, mais celui-ci colore et numérote le code), et mettez simplement dedans <?php phpinfo(); ?> .


Si vous êtes en local



Installez WAMP ; si le pare-feu se met à dire qu'il bloque Apache, débloquez-le, sinon votre serveur web ne fonctionnera tout simplement pas. ^^
Il n'est pas dangereux, ne craignez rien.
Lancez WAMP : si tout s'est bien passé, une petite icône se met dans la barre des tâches, à côté de l'horloge.
Enregistrez votre fichier dans le répertoire www de WAMP, sous le nom de info.php.
Ouvrez votre navigateur, tapez dans la barre d'adresse ceci :

Citation : barre d'adresse
http://localhost/info.php



Si vous êtes en distant (sur Internet)



Enregistrez votre fichier où vous voulez sur votre disque dur, sous le nom de info.php.
Ouvrez votre logiciel de transfert FTP (je conseille Filezilla).
Transférez votre fichier, et allez voir à cette adresse :

Citation : barre d'adresse
http://votre_site/info.php


Dans les deux cas, vous devez tomber sur une page similaire à ça :

Voilà la page où toutes les informations sur PHP sont données


Si vous êtes en local, il faut activer GD :

Voilà : PHP et GD sont opérationnels.

Si vous êtes en distant, si votre hébergeur accepte GD, c'est bien (même super ^^ ), sinon, ben soit vous changez d'hébergeur et vous en trouvez un qui l'accepte, soit vous abandonnez GD.

Création d'une image et affichage à la fin

Ici, une image est créée, et affichée comme une .png (ou .jpeg) à la fin.


Code : PHP
1
2
3
4
<?php
header ("Content-type: image/png");
$image = imagecreate(600,130);
?>




Code : PHP
1
2
3
4
5
6
7
8
<?php
$fond = imagecolorallocate($image, 159, 64, 119); // Un peu lavande
$rouge = imagecolorallocate($image, 255, 0, 0); // Rouge
$vert = imagecolorallocate($image, 0, 255, 0); // Vert
$bleu = imagecolorallocate($image, 0, 0, 255); // Bleu
$blanc = imagecolorallocate($image, 255, 255, 255); // Blanc
$noir = imagecolorallocate($image, 0, 0, 0); // Noir
?>



N'oubliez pas que la première couleur définie est celle qui s'appliquera au fond de l'image : si vous voulez le garder blanc mais utiliser juste la couleur noire, faites une couleur blanche, même si vous ne vous en servez pas, comme ça :

Code : PHP
1
2
3
4
<?php
$blanc = imagecolorallocate($image, 255, 255, 255); // Blanc, couleur de fond.
$noir = imagecolorallocate($image, 0, 0, 0); // La couleur utilisée.
?>



Passons maintenant au choix de la police utilisée (= forme des caractères).
Voici les différentes étapes.
Ensuite, le code, tout simple :

Code : PHP
1
2
3
<?php
$police = 'comic.ttf';
?>



On peut écrire le lien vers la police directement dans la fonction qui suit, mais je vous conseille d'utiliser une variable, c'est plus clair.

Code : PHP
1
2
3
<?php
$texte = 'Le texte que je souhaite écrire ("imprimer" sur mon image)';
?>


Ici, c'est aussi simplissime qu'avant : on écrit notre texte dans une variable, on peut aussi le mettre directement dans la fonction, mais c'est plus clair.

On passe à THE FONCTION (très utile, très puissante, très compliquée :-° ) :

Code : PHP
1
2
3
<?php
imagettftext($image, 15, 0, 30, 70, $noir, $police, $texte);
?>


Je pense qu'une explication détaillée s'impose :
Ouf ! >_<

Pour finir, comment afficher l'image :

Code : PHP
1
2
3
<?php
imagepng($image);
?>


Si vous aviez créé une image jpeg, mettez alors <?php imagejpeg($image); ?>

Pour les adeptes du copier-coller, voici le code complet :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
header ("Content-type: image/png"); // Déclaration au navigateur qu'une image (ici png) va être envoyée.

$image = imagecreate(600,130); // Création de l'image

// Création de couleurs
$fond = imagecolorallocate($image, 159, 64, 119); // Un peu lavande
$rouge = imagecolorallocate($image, 255, 0, 0); // Rouge
$vert = imagecolorallocate($image, 0, 255, 0); // Vert
$bleu = imagecolorallocate($image, 0, 0, 255); // Bleu
$blanc = imagecolorallocate($image, 255, 255, 255); // Blanc
$noir = imagecolorallocate($image, 0, 0, 0); // Noir

$police = 'comic.ttf'; // Choix de la police

$texte = 'Le texte que je souhaite écrire ("imprimer" sur mon image)'; // Texte à écrire

imagettftext($image, 15, 0, 30, 70, $noir, $police, $texte); // Écriture du texte avec plein d'options

imagepng($image); // Affichage de l'image
?>

Création d'une image et enregistrement à la fin

Je ne détaille pas les fonctions déjà vues dans la partie précédente, seulement les nouvelles.


Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<?php
$image = imagecreate(600,130); // Création de l'image

// Création de couleurs
$fond = imagecolorallocate($image, 159, 64, 119); // Un peu lavande
$rouge = imagecolorallocate($image, 255, 0, 0); // Rouge
$vert = imagecolorallocate($image, 0, 255, 0); // Vert
$bleu = imagecolorallocate($image, 0, 0, 255); // Bleu
$blanc = imagecolorallocate($image, 255, 255, 255); // Blanc
$noir = imagecolorallocate($image, 0, 0, 0); // Noir

$police = 'comic.ttf'; // Choix de la police

$texte = 'Le texte que je souhaite écrire ("imprimer" sur mon image)'; // Texte à écrire

imagettftext($image, 15, 0, 30, 70, $noir, $police, $texte); // Écriture du texte avec plein d'options

imagepng($image, "images/ma_nouvelle_image.png"); // Enregistrement de l'image
?>


Chargement d'une image et affichage à la fin

Je ne détaille pas les fonctions déjà vues dans la deuxième partie, seulement les modifications.


Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
header ("Content-type: image/png"); // Déclaration au navigateur qu'une image (ici png) va être envoyée.

$image = imagecreatefrompng("mon_image.png"); // Chargement de l'image

// Création de couleurs
$fond = imagecolorallocate($image, 159, 64, 119); // Un peu lavande
$rouge = imagecolorallocate($image, 255, 0, 0); // Rouge
$vert = imagecolorallocate($image, 0, 255, 0); // Vert
$bleu = imagecolorallocate($image, 0, 0, 255); // Bleu
$blanc = imagecolorallocate($image, 255, 255, 255); // Blanc
$noir = imagecolorallocate($image, 0, 0, 0); // Noir

$police = 'comic.ttf'; // Choix de la police

$texte = 'Le texte que je souhaite écrire ("imprimer" sur mon image)'; // Texte à écrire

imagettftext($image, 15, 0, 30, 70, $noir, $police, $texte); // Écriture du texte avec plein d'options

imagepng($image); // Affichage de l'image
?>


Si l'image de départ n'existe pas, vous aurez une tonne de messages d'erreurs !


imagecreatefrompng : chargement d'une image png, le lien doit être relatif (ici, mon_image.png est dans le même dossier que mon script). Si l'image de base était une image jpeg, il aurait fallu mettre imagecreatefromjpeg (sans oublier imagejpeg à la fin).

Chargement d'une image et enregistrement à la fin

Je ne détaille pas les fonctions déjà vues dans la deuxième partie, seulement les nouvelles.


Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<?php
$image = imagecreatefrompng("mon_image.png"); // Chargement de l'image

// Création de couleurs
$fond = imagecolorallocate($image, 159, 64, 119); // Un peu lavande
$rouge = imagecolorallocate($image, 255, 0, 0); // Rouge
$vert = imagecolorallocate($image, 0, 255, 0); // Vert
$bleu = imagecolorallocate($image, 0, 0, 255); // Bleu
$blanc = imagecolorallocate($image, 255, 255, 255); // Blanc
$noir = imagecolorallocate($image, 0, 0, 0); // Noir

$police = 'comic.ttf'; // Choix de la police

$texte = 'Le texte que je souhaite écrire ("imprimer" sur mon image)'; // Texte à écrire

imagettftext($image, 15, 0, 30, 70, $noir, $police, $texte); // Écriture du texte avec plein d'options

imagepng($image, "images/ma_nouvelle_image.png"); // Enregistrement de l'image
?>


Si l'image de départ n'existe pas, vous aurez une tonne de messages d'erreurs !


Annexe


Ce qu'affiche le script (celui qui crée une image) :
Voici ce que donne le script n° 1

TP : l'ombre du texte

Le but de ce TP



Dans ce TP, vous devez réussir à faire un texte ombré.
Vous pouvez utiliser toutes les fonctions que l'on a vues ci-dessus.
Prêts... Partez !


Correction



STOP ! C'est fini. Faites passer vos copies, svp. Hep, toi là-bas, j'ai dit "C'est fini". Passe-moi ta copie, stp. Lààààà... voilà. Merci.
Regardez au tableau la correction... merci.

Secret (cliquez pour afficher)
Non, je ne suis pas prof, et je ne veux pas le devenir :p .


Secret (cliquez pour afficher)

Voici ce qu'il fallait faire :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<?php
header ("Content-type: image/png"); // Déclaration au navigateur qu'une image (ici png) va être envoyée.

$image = imagecreate(700,180); // Création de l'image

// Création de couleurs
$fond = imagecolorallocate($image, 31, 240, 255); // Turquoise
$gris = imagecolorallocate($image, 100, 100, 100); // Gris
$noir = imagecolorallocate($image, 0, 0, 0); // Noir

$police = 'times.ttf'; // Choix de la police

$texte = 'Mon texte ombré'; // Texte à écrire

imagettftext($image, 50, 0, 102, 102, $gris, $police, $texte); // Écriture du texte en gris.
imagettftext($image, 50, 0, 100, 100, $noir, $police, $texte); // Écriture du texte en noir, par-dessus le gris, mais avec un décalage de 2 pixels.

imagepng($image); // Affichage de l'image
?>


Ce qui donne ça :
C'est beau hein ! ^^


Voilà. Pas trop dur, j'espère. Si !?

TP : afficher dans une image l'URL de la page courante

Vous voici dans le deuxième (et dernier ^^ ) TP.


Préparatifs



Le but : récupérer l'URL de la page en cours et l'écrire dans une image.
Difficulté : il faut calculer la longueur de l'image que l'on va créer.
Un petit indice :

Secret (cliquez pour afficher)
Pour récupérer l'URL, on utilise <?php $_SERVER['REQUEST_URI']; ?>.
Ça ne récupère que ce qui suit le http://mon_site.fr


Un autre :

Secret (cliquez pour afficher)
La fonction <?php imagettfbbox ?> renvoie un array qui contient les longueurs d'une image à partir d'une chaîne, je vous laisse chercher les 4 paramètres qu'il faut lui donner. :p


Un dernier ? Voilà :

Secret (cliquez pour afficher)
Il faut 2 pages PHP.



Correction



Passons à la correction : attention, ce TP était plus dur que le précédent.

Secret (cliquez pour afficher)

Tout d'abord, ceux qui ont mis le <?php $_SERVER['REQUEST_URI']; ?> dans la page qui exécute le code GD ont faux : dans ce cas, l'URL serait celui de la page GD.
Il faut le mettre dans la page appelante : (on va faire la page HTML en même temps).

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
		<title>Affichage de l'URL en appelant l'image</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</head>
	<body>
		<img src="gd.php?url=<?php echo $_SERVER['REQUEST_URI']; ?>" />
	</body>
</html>


Ici, on récupère l'URL, et on la transmet à gd.php qui l'écrira.

Code : PHP - gd.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<?php
	header ("Content-type: image/png"); // Déclaration au navigateur qu'une image (ici png) va être envoyée.

	$taille = 20; // La taille, en pixels, des caractères
	$angle = 0; // L'angle d'inclinaison
	$police = 'times.ttf'; // Choix de la police
	$texte = 'http://votresite.fr' . $_GET['url']; // Texte à écrire

	$longueur = imagettfbbox($taille, $angle, $police, $texte); // Cette fonction renvoie un array qui contient l'abscisse et l'ordonnée des quatre coins de l'image. 
	$image = imagecreate($longueur[2] + 10,75); // On prend la deuxième valeur : l'abscisse du coin inférieur droit, et on ajoute 10 pixels, car sinon le texte est un peu coupé.

	// Création de couleurs
	$fond = imagecolorallocate($image, 170, 170, 100); // Marron  clair
	$noir = imagecolorallocate($image, 0, 0, 0); // Noir

	imagettftext($image, $taille, $angle, 5, 40, $noir, $police, $texte); // Écriture du texte

	imagepng($image); // Affichage de l'image
?>


Pour finir, vu que REQUEST_URI ne renvoie pas toute l'URL, il vous suffit de remplacer votresite.fr par votre nom de domaine, et le tour est joué. Il est possible que votre page s'appelle index.php?page=accueil, ça marchera.

Je vais revenir vite fait quand même sur la fonction imagettfbbox :
  • 1er paramètre : la taille d'écriture du votre texte. Il faut que ce soit la même dans ma fonction qui calcule la longueur et celle qui écrit la chaîne. Sinon imaginez...
  • 2e paramètre : l'angle d'inclinaison de votre texte. Ici aussi, il faut que ce soit le même dans les deux fonctions ;
  • 3e paramètre : le chemin d'accès à votre police. Je me répète, mais on garde toujours le même que dans imagettftext ;
  • 4e paramètre : ah, votre texte. Il faut que ce soit le même dans les deux fonctions.

Liens

Tutoriel PHP (LE tuto officiel)

WAMP (logiciel combinant Apache, PHP et SQL)

Tutoriel GD (chapitre du tuto PHP, qui généralise GD)

Notepad++ (éditeur de texte qui colore le code et qui numérote les lignes)

Documentation GD (la description détaillée de toutes les fonctions GD, mais pas toujours simple à comprendre)

Filezilla (logiciel de transfert FTP, pour interagir avec les fichiers de votre serveur)
Eh bien voilà, vous êtes à la fin. Bravooo :lol: .
Si vous avez le moindre problème, n'hésitez pas à m'envoyer un MP.
Retour en haut Retour en haut


Créé : le 15/08/2008 à 01:08:21
Modifié : le 18/11/2008 à 22:59:42
Avancement : 100%

L'orthographe, la grammaire et la présentation de ce tutoriel ont été vérifiées par les zCorrecteurs.
8 commentaires

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 287 Zéros connectés | Requêtes SQL 9 requêtes | Temps de génération de la page : Total (SQL) 0.0566s (0.0449s)