Histoire de bosser un peu sur l'utilisation d'Imagick (pour lequel je m'étais fait des notes ici 12) j'ai essayé de faire une petite «api» de génération de badges simple.

Objectifs

• Un script qui permet de faire des badges à une ou plusieurs parties,
• gestion de la taille de police et de la police,
• gestion des couleurs,
• gestion d'icônes

Résultat

On peut appeler l'api directement en précisant les variables suivantes:

• txt: le texte; s'il y a plusieurs parties, on les sépare par un |. exemple ?txt=trop beau|pas vrai
• backcolor: la couleur de fond; on peut préciser la couleur de chaque partie en les séparant par | aussi. La notation se fait comme en css (sauf pour le # qu'il faut omettre) ```F00|red|rgba(255,0,0,0.5)
• textcolor: pareil pour le texte. Par défaut, badgit va choisir le blanc ou le noir afin de maintenir le meilleur contraste.
• fontsize: la taille de police
• font: une des fontes installées. Je n'en ai mis que deux pour le moment mais on peut utiliser «courier» par exemple.
• icon: le nom d'une icône de iconeleon (j'ai d'ailleurs ajouté une option pour copier le nom en question depuis l'api d'icônes.)

Exemples

api.warriordudimanche.net/badgit/?txt=Mon%20super%20badge&backcolor=red&txtcolor=&icon=&font=montserrat.ttf&fontsize=16

api.warriordudimanche.net/badgit/?txt=Mon%20super|badge&backcolor=red|pink&txtcolor=pink|red&icon=&font=montserrat.ttf&fontsize=16

api.warriordudimanche.net/badgit/?txt=Mon%20super|badge|de%20ouf&backcolor=red|pink|maroon&txtcolor=pink|red&icon=&font=montserrat.ttf&fontsize=16

api.warriordudimanche.net/badgit/?txt=Mon%20super|badge%20|de%20ouf%20&backcolor=red|pink|maroon&txtcolor=pink|red&icon=|fontawesome_solid/smile-beam.svg|fontawesome_solid/hand-back-fist.svg&font=montserrat.ttf&fontsize=16

Frontend

J'ai goupillé aussi un petit front basique, histoire de ne pas se taper tout au clavier.

Conclusion

Ça ne servira sans doute à personne mais bon, sait-on jamais

Ceci dit, il y a une classe badge qui peut faire l'affaire quelque part...

Le code est là : https://api.warriordudimanche.net/badgit/?download

<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

---

► Commentaires