Des coins arrondis en PHP avec la bibliothèque GD

Pourquoi la bibliothèque GD ?

J’avais besoin d’ajouter des coins arrondis à quelques photos et je ne voulais pas modifier les fichiers originaux dans Photoshop; je pense en effet que c’est une mauvaise idée d’altérer les images originales si l’effet peut être ajouté dynamiquement.

Tout d’abord, je pensais que CSS ferait l’affaire. Mais après avoir trouvé quelques tutoriels sur le web (certains utilisent également Javascript), j’ai réalisé que, pour ça fonctionne dans la plupart des navigateurs web, ce n’est pas aussi simple qu’il y paraît et beaucoup de méthodes requièrent de créer des balises (tags) DIV supplémentaires.

J’ai donc décidé d’utiliser la librairie GD, que j’avais trouvé très utile dans d’autres projets. Je ne dis pas que cette solution est parfaite ou mieux que d’autres, mais elle a très bien fonctionné pour moi et j’espère qu’elle vous sera également utile.

Avantages de cette solution :

  • Flexible : vous pouvez choisir quels coins doivent être arrondis, ainsi que le rayon
  • Cross-browser : les coins arrondis étant appliqués du côté serveur, il n’y pas besoin de support CSS ou Javascript
  • Propre: aucune balise (tag) DIV supplémentaire.
  • L’image entière peut être pivotée, tout en gardant les coins arrondis.

Limites connues:

    • Selon l’image de coin arrondi utilisée, un bord noir peut apparaître, lorsque le rayon est différent de l’original, à cause de problèmes de transparence dans la bibliothèque GD. Utilisez donc une image de coin avec le rayon choisi, si possible.
    • L’attribut src de l’image contient le fichier de la fonction. Il faut donc modifier les balises (tags) IMG de votre code, pour les images qui doivent avoir des bords arrondis.

Code PHP

Utilisation

Il va de soi que PHP et la bibliothèque GD doivent être installés sur votre serveur. Vous aurez également besoin d’un fichier png du coin arrondi. Vous pouvez utiliser une de nos images de coins arrondis si vous le souhaitez.

Collez simplement le code ci-dessus et sauvegardez-le dans un fichier .php. Apportez les modifications nécessaires aux variables $images_dir et $corner_source (lignes 10 et 11). L’attribut src de votre image doit être dirigé vers ce fichier, en utilisant les variables URL suivantes :

  • src : nom de l’image
  • radius (facultatif): valeur qui représente le rayon (en pixels) des coins ; utilisez ceci pour redimensionner l’image du coin
  • angle (facultatif): valeur représentant l’angle de rotation de l’image complète, en degrés
  • topleft = no (facultatif): ne pas arrondir le coin supérieur gauche
  • bottomleft = no (facultatif): ne pas arrondir le coin inférieur gauche
  • bottomright = no (facultatif): ne pas arrondir le coin inférieur droit
  • topright = no (facultatif): ne pas arrondir le coin supérieur droit

Exemples

N’hésitez pas à nous contacter ou à laisser un commentaire ci-dessous si vous avez des questions à propos de ce code.

Leave a comment