Imagefilter() : les effets spéciaux

Rechercher
Boutique en ligne, solution e-commerce, script PHP et PERL : RAYNETTE

Imagefilter() : les effets spéciaux

  • Par Emacs
  • 16 commentaires
  • 29727 lectures
  • RSS -  Atom

Le langage PHP permet de manipuler les images depuis de nombreuses années et pour appliquer des effets spéciaux sur celle-ci, nous étions souvent obligés d'écrire de nombreuses lignes de programmation. Depuis la version PHP 5, une nouvelle fonction est apparue : « IMAGEFILTER » permettant d’obtenir des effets avec la même qualité que des logiciels de dessins.

Cette fonction permet de personnaliser l’aspect visuel de votre site ou aussi de réaliser une galerie photos différentes des autres.

Nous verrons donc :

  • Les bases
  • La fonction ImageFilter()
  • Comment jouer avec quelques filtres ?

Les bases

Avant d’utiliser ces nouveaux effets, il est important d'avoir la librairie GD activée. Si celle-ci n'est pas active, sachez qu'elle se trouve dans le fichier de php.ini. Pour vérifier que la librairie GD fonctionne correctement, nous allons tenter de charger une image, puis l'afficher :

Chargement et affichage d'une image JPG
<?php
$image = @imagecreatefromjpeg('paysage.jpg'); // Charge l'image JPG
imagejpeg($image); // Affiche l'image
imagedestroy($image); // libère l'image
?>

Voici le résultat :

 

Première image chargée et affichée avec GD 2

 

La fonction ImageFilter

Cette fonction permet d'appliquer un filtre sur une image. Elle se présente comme ceci :

Prototype de la fonction imagefilter()
imagefilter ( resource $image , int $filtertype [, int $arg1 [, int $arg2 [, int $arg3 ]]] )

Imagefilter() se décompose en 3 critères :

  • image : nom de l'image
  • filtertype : le type de filtre de son choix
  • arg : les critères, si nécessaire, par rapport au type de filtre choisi. La tranche de nuance permet d'effectuer de -255 à +255

Pour illustrer nos différents exemples, nous partirons sur le paysage que nous avons affiché ci-dessus.

Le filtre IMG_FILTER_BRIGHTNESS

Ce filtre permet de modifier la luminosité de l'image. Nous n'utiliserons que l'argument 1 (arg1). La valeur possible sera comprise entre -255 et 255 qui représente :

  • 255 : Eclaircir l'image avec un maximum vers le blanc (effet de brillance)
  • 0 : Valeur par défaut. Couleur inchangée
  • -255 : Assombrir l'image au maximum vers le noir (effet sombre)
Exemple d'utilisation du filtre IMG_FILTER_BRIGHTNESS
<?php
$nom_fichier='paysage.jpg';
$valeur=0;
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_BRIGHTNESS, $valeur);
imagejpeg($image);
imagedestroy($image);
?>

Voici quelques resultats avec différentes valeurs :

$valeur=-100 $valeur=-5
Utilisation du filtre IMG_FILTER_BRIGHTNESS avec une luminosité de -100

 

Utilisation du filtre IMG_FILTER_BRIGHTNESS avec une luminosité de -50

 

$valeur=100 $valeur=50

 

Utilisation du filtre IMG_FILTER_BRIGHTNESS avec une luminosité de 100

 

 

Utilisation du filtre IMG_FILTER_BRIGHTNESS avec une luminosité de 50

 

Le filtre IMG_FILTER_COLORIZE

Ce filtre permet de modifier les tendances des couleurs, c’est à dire de soustraire une couleur par rapport aux autres. Nous utiliserons les 3 arguments, qui représentent les nuances de Rouge, Vert, Bleu. Chacune des valeurs de ses nuances elles se trouvant un intervalle de –255 à 255.

Exemple d'utilisation du filtre IMG_FILTER_COLORIZE
<?php
$nom_fichier='paysage.jpg';
$r=100;
$v=0;
$b=-50;
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image,IMG_FILTER_COLORIZE,$r,$v,$b);
imagejpeg($image);
imagedestroy($image);
?>

Voici quelques résultats avec quelques valeurs différentes :

R : 0 V :-100 B : 0 R : 0 V :100 B : 5
Utilisation du filtre IMG_FILTER_COLORIZE avec les valeurs 0R, -100V, 0B
Utilisation du filtre IMG_FILTER_COLORIZE avec les valeurs 0R, 100V et 50B
R : 100 V : 0 B : -50
 
Utilisation du filtre IMG_FILTER_COLORIZE avec les valeurs 100R, 0V et -50B

Le filtre IMG_FILTER_CONTRAST

Ce filtre modifie le contraste de l'image. Pour déterminer ce contraste, nous utiliserons l’argument 1 (arg1). Sa valeur est comprise dans l'intervalle -255 et 255 où :

  • 255 : Eclaircir l'image avec un maximum vers le blanc (effet de brillance)
  • 0 : Valeur par défaut. Couleur inchangée
  • -255 : Assombrir l'image au maximum vers le noir (effet sombre)
Exemple d'utilisation du filtre IMG_FILTER_CONTRAST
<?php
$nom_fichier='paysage.jpg';
$valeur=-50;
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image,IMG_FILTER_CONTRAST,$valeur);
imagejpeg($image);
imagedestroy($image);
?>

Voici quelques résultats :

-100 -50
Utilisation du filtre IMG_FILTER_CONTRAST avec un contraste de -100
Utilisation du filtre IMG_FILTER_CONTRAST avec un contraste de -50
15
Utilisation du filtre IMG_FILTER_CONTRAST avec un contraste de 15

Le filtre IMG_FILTER_EDGEDETECT

Ce filtre utilise la détection des bords pour les mettre en évidence dans l'image. Aucun argument sera utilisé car ce filtre est appliqué sur l’ensemble de l’image

Exemple d'utilisation du filtre IMG_FILTER_EDGEDETECT
<?php
$nom_fichier='paysage.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_EDGEDETECT);
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

 

Résultat après utilisation du filtre IMG_EDGEDETECT

 

Le filtre IMG_FILTER_EMBOSS

Ce filtre permet de graver l'image en relief. Aucun argument sera utilisé car ce filtre est appliqué sur l’ensemble de l’imag.

Exemple d'utilisation du filtre IMG_FILTER_EMBOSS
<?php
$nom_fichier='paysage.jpg';
$image = @imagecreatefromjpeg($nom_fichier); /* Tentative d'ouverture */
imagefilter($image, IMG_FILTER_EMBOSS);
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

 

Résultat après utilisation du filtre IMG_FILTER_EMBOSS

 

Le filtre IMG_FILTER_GAUSSIAN_BLUR

Ce filtre permet de brouiller l'image en utilisant la méthode gaussienne. Aucun argument n’est utilisé car ce filtre est appliqué sur l’ensemble de l’image. Il peut être associé au filtre IMG_FILTER_SELECTIVE_BLUR (voir plus loin).

Exemple d'utilisation du filtre IMG_FILTER_GAUSSIAN_BLUR
<?php
$nom_fichier='paysage.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

 

Résultat après utilisation du filtre IMG_FILTER_GAUSSIAN_BLUR

 

Le filtre IMG_FILTER_SELECTIVE_BLUR

Ce filtre permet de rendre flou une image. Aucun argument n’est utilisé car ce filtre est appliqué sur l’ensemble de l’image. Il peut être associé au filtre IMG_FILTER_GAUSSIAN_BLUR (voir plus loin).

Exemple d'utilisation du filtre IMG_FILTER_SELECTIVE_BLUR
<?php
$nom_fichier='paysage.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_SELECTIVE_BLUR);
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

 

Résultat après utilisation du filtre IMG_FILTER_SELECTIVE_BLUR

 

Le filtre IMG_FILTER_SMOOTH

Ce filtre permet de lisser l'image. Nous utiliserons l’argument 1 (arg1) pour déterminer le degré de lissage. La valeur possible sera comprise entre -255 et 255 qui représente :

  • 255 : Eclaircir l'image avec un maximum vers le blanc (effet de brillance)
  • 0 : Valeur par défaut. Couleur inchangée
  • -255 : Assombrir l'image au maximum vers le noir (effet sombre)
Exemple d'utilisation du filtre IMG_FILTER_SMOOTH
<?php
$nom_fichier='paysage.jpg';
$valeur=50;
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_SMOOTH, 10);
imagejpeg($image);
imagedestroy($image);
?>

Voici quelques résultats avec des valeurs différentes :

100 50

 

Résultat après utilisation du filtre IMG_FILTER_SMOOTH avec une valeur de 100

 

Résultat après utilisation du filtre IMG_FILTER_SMOOTH avec une valeur de 50
-100 -50

 

Résultat après utilisation du filtre IMG_FILTER_SMOOTH avec une valeur de -100

 

 

Résultat après utilisation du filtre IMG_FILTER_SMOOTH avec une valeur de -50

 

Le filtre IMG_FILTER_GRAYSCALE

Ce filtre convertit l'image en noir et blanc, c’est à dire que nous retrouvons les mêmes possibilités que le filtre IMG_FILTER_COLORIZE, sauf qu’ici, nous ne pouvons pas choisir la couleur.

Exemple d'utilisation du filtre IMG_FILTER_GRAYSCALE
<?php
$nom_fichier='paysage.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_GRAYSCALE);
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

 

Résultat après utilisation du filtre IMG_FILTER_GRAYSCALE

 

Le filtre IMG_FILTER_NEGATE

Ce filtre permet de renverser toutes les couleurs de l'image pour la rendre en négative.

Exemple d'utilisation du filtre IMG_FILTER_NEGATE
<?php
$nom_fichier='paysage.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_NEGATE);
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

 

Résultat après utilisation du filtre IMG_FILTER_NEGATE

 

Le filtre IMG_FILTER_MEAN_REMOVAL

Ce filtre permet d'appliquer un effet de bruit à l'image.

Exemple d'utilisation du filtre IMG_FILTER_MEAN_REMOVAL
<?php
$nom_fichier='paysage.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_MEAN_REMOVAL);
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

 

Résultat après utilisation du filtre IMG_FILTER_MEAN_REMOVAL

 

Maintenant que nous avons vu l’ensemble des filtres possibles pour cette fonction, nous pouvons appliquer plusieurs filtres sur une même image.

Jouons avec quelques types de filtres

Nous allons, pour chaque effet présenté, partir sur une image d’origine différente. Le premier effet consistera en la dissociation des teintes RVB de l'image. Le second script que nous découvrirons applitira notre image. Notre troisième essai aura pour objectif d'appliquer un flou, puis nous clôturerons ce tutoriel par la création d'un d'effet monochrome. Etudions le premier effet :

Effet 1 : Dissocier les couleurs

Pour réaliser cet effet très répandu dans les logiciels de dessins, nous devrons appliquer deux opérations à l'image. Tout d'abord, il faut convertir l’image en noir et blanc avec le filtre IMG_FILTER_GRAYSCALE, puis recoloriser la teinte de son choix avec le filtre IMG_FILTER_COLORIZE.

Script de dissociation des couleurs RVB d'une image
<?php
// Teinte rouge
$r=255; $v=0; $b= 0;
// Teinte verte
$r=0;$v=255;$b= 0;
// Teinte bleue
$r=0;$v=0;$b= 255;
$nom_fichier='livreeni.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_GRAYSCALE);
imagefilter($image, IMG_FILTER_COLORIZE, $r,$v,$b);
imagejpeg($image);
imagedestroy($image);
?>

Vous l'aurez compris,vous devrez exécuter le script à trois reprise en commantant à chaque fois deux des trois lignes de code numéro 4, 7 et 10.

Nous obtenons comme résultat final :

Image originale $r=255; $v=0; $b=0

 

Image originale du script de dissociation des couleurs
Résultat de la dissociation des teintes de rouge
$r=0; $v=255; $b=0 $r=0; $v=0; $b=255
Résultat de la dissociation des teintes de vert
Résultat de la dissociation des teintes de bleu

Effet 2 : Effet aplatir

Pour réaliser cet effet d'aplatissement qui peut se rapprocher d’un effet de gravure, nous devrons décomposer l'algorithme en deux opérations élémentaires.

  • Détecter les différences de l’image avec le filtre IMG_FILTER_EDGEDETECT
  • Transformer l’image en relief avec le filtre IMG_FILTER_EMBOSS
Exemple de script d'aplatissement d'une image
<?php
$nom_fichier='afup.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
imagefilter($image, IMG_FILTER_EDGEDETECT);
imagefilter($image, IMG_FILTER_EMBOSS);
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

Image originale Image avec effet applâti
Image originale non applâtie
Image avec effet applâti

Effet 3 : Effet de flou

Cet effet montre comment créer un effet de flou. Nous utiliserons 2 filtres pour arriver à nos fins :

  • Brouiller l’image avec le filtre IMG_FILTER_GAUSSIAN_BLUR
  • Brouiller un peu plus avec le filtre IMG_FILTER_SELECTIVE_BLUR
Script de réalisation d'un flou sur une image
<?php
$nom_fichier='php_logo.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
Imagefilter ($image, IMG_FILTER_GAUSSIAN_BLUR);
imagefilter ($image , IMG_FILTER_SELECTIVE_BLUR );
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

Image originale
Image avec effet de flou
Image originale avant application du fou
Image avec effet de flou

Effet 4 : Effet monochrome

Nous allons effectuer l’opération en 2 temps :

  • Transformer une image en gris avec le filtre IMG_FILTER_GRAYSCALE
  • Ressortir les niveaux de couleurs avec le filtre IMG_FILTER_NEGATE
Script de création de flou sur une image
<?php
$nom_fichier='paysage.jpg';
$image = @imagecreatefromjpeg($nom_fichier);
Imagefilter ($image, IMG_FILTER_GRAYSCALE);
imagefilter ( $image , IMG_FILTER_NEGATE );
imagejpeg($image);
imagedestroy($image);
?>

Pour obtenir le résultat suivant :

Image originale Image avec filtre monochrome
Image originale avant application du filtre monochrome
Résultat après application du filtre monochrome

Conclusion

Il est possible de réaliser tous sortes d’effets supplémentaires avec l’ensemble des filtres qui nous sont proposés. Il ne tient plus qu’à vous d’effectuer des tests par vous même.

Télécharger les sources de ce tutoriel

Auteur

Christophe Villeneuve - couverture de PHP et MySQL - MySQLi - PDO : construisez votre applicationChristophe Villeneuve est un membre actif de l'AFUP (Association Française des Utilisateurs de PHP). Il participe activement à la communauté francophone de PHP en proposant régulièrement des actualités sur les portails Nexen.net et PHPTeam.net. Ses compétences en développement PHP l'ont amené à éditer le livre « PHP et MySQL - MySQLi - PDO : Construisez votre application » aux éditions ENI.

 



Les commentaires

1. Par mirc00 le 26/02/2008 12:38

génial

2. Par Pierre le 27/02/2008 01:11

Hi Christophe!

Tres bon tutorial!! bon travail

Tu peux aussi mentionner imageconvolution. Elle te permet de definir tes propres matrices de convolutions (comme dans photoshop ou gimp par exemple).

a+

3. Par Ben S. le 27/02/2008 22:06

Je n'ai rien à dire concernant l'aspect technique de cette fonctionnalité : les résultats ont l'air tout à fait à la hauteur.

Ce qui me rend plus perplexe, c'est l'utilité d'une telle prouesse....
A part pour créer un Photoshop-like en ligne peut-être, mais je ne suis pas sûr que le niveau de performance de PHP soit optimal pour ce type d'application qui a besoin d'être plutôt réactif...

Avez-vous des exemples concrêt à proposer ? parce que personnellement, mettre en rouge une couverture de livre....je vois pas quand j'en aurais besoin. Pas vous ?

4. Par ichevc le 28/02/2008 12:50

en reponse a Ben.
php-gtk tu connais?
Donc oui grande utilité.
pour le web pur :
une admin d'un site (cms ou autre) qui permet de retoucher les photos uploadé ...
script de reconnaissance de forme dans une image ... (je pense a IMG_FILTER_EDGEDETECT notamment)
etc etc etc

5. Par kac le 02/03/2008 13:12

Excellent article, je connaissais pas.
Au moins, ça évitera d'ouvrir un éditeur d'imagerie

6. Par vpetitgi le 06/03/2008 22:53

Excellent article, bien éclairé par des exemples significatifs. Beau boulot.
Cependant, comme toujours avec ce type de fonction, il n'y a pas de filtre SHARP, qui serait extrêmement utile : cela permettrait de donner le coup de netteté nécessaire lors de la création de vignettes à la volée (avec GD)
Y a t'il une raison technique à l'absence de ce filtre ?

7. Par Séb le 11/03/2008 17:44

Tutorial très intéressant
L'intérêt pour répondre à Ben, c’est de pouvoir lorsque l’on fait du graphisme sur un site web de laisser à php le soin de faire coller des images à une apparence général du site. Noir et Blanc, Sépia, Bouton de couleur différentes au survol. Pas besoin de s’embêter au niveau graphisme, PHP retouchera les images une fois postées.

8. Par Ben S. le 18/03/2008 21:29

Ok ichevc, j'admet qu'avec la reconnaissance de forme, je peux imaginer que cette livrairie puisse faciliter les choses.
Pour créer sons propre outil de retouche d'image, aussi, comme je l'imaginais.

En revanche Séb, l'argument de faire coller les images à une apparence générale du site, je trouve un peu tiré par les cheveux, mais c'est tout à fait personnel et j'arrête tout de suite le débat : je ne veux vraiment pas lancer de troll sur la question.

L'important est que ça puisse être utile à certains... pas moi pour l'instant, mais qui sait, c'est toujours bon de savoir que ça existe !

9. Par Emacs le 19/03/2008 09:18

Ces fonctions peuvent notamment servir à créer des captchas visuels un peu plus complexes !

10. Par Sun Location vacances le 06/06/2008 10:52

Merci pour tous ces exemples d'utilisation des fonctions images par GD

11. Par Fred le 28/07/2008 00:20

Bonjour, ça m'affiche dans le navigateur des caractères au lieu de l'image, comme si j'ouvrais celle-ci avec le bloc-note (et j'ai GD activé).
Pourquoi ?

12. Par Emacs le 28/07/2008 00:46

Bonsoir,

C'est probablement du fait que vous n'avez pas indiqué au navigateur que le contenu envoyé correspond à une image. Par défaut le navigateur va chercher à afficher un contenu textuel. Pour lui indiquer que vous lui envoyez une image JPG par exemple, vous devez lui transmettre les bons entêtes avec header() :

<?php
$nom_fichier='paysage.jpg';
header('Content-Type: image/jpg';
$image = @imagecreatefromjpeg($nom_fichier);
Imagefilter($image, IMG_FILTER_GRAYSCALE);
imagefilter( $image , IMG_FILTER_NEGATE );
imagejpeg($image);
imagedestroy($image);
?>

A bientôt.

Hugo.

13. Par ch3wi94 le 28/12/2008 18:25

Bon tuto et bien expliqué.
Bravo

14. Par spout le 17/06/2009 11:59

Intéressant, on peut imaginer réaliser un colorpicker javascript + auto-génération php des images en fonction des couleurs du picker.
Ça peut éviter de faire une appli lourde en flash ou de se tapper la génération de chaque image dans la couleur demandée à la main

15. Par alibaba le 30/06/2009 02:50

Même problème avec Fred(commentaire N°11), j'ai activé le GD.
J'ai même fait copié/collé le code (commentaire N°12). ça m'affiche toujours des caractères spéciaux sans l'image. Du coup j'arrive pas à tester le tuto!

16. Par nax le 19/08/2009 23:18

Mouai c'est surtout des matrices de convolutions cachés :
http://www.siteduzero.com/tutoriel-3-56210-les-captchas-graphiques.html#ss_part_4