Web

Développer un générateur de QR code design avec PHP et Imagemagick

Vous en avez sûrement déjà vu, ces petits carrés noirs sur fond blanc. On en trouve de plus en plus. Sur les affiches de spectacles et de cinéma, dans les magazines, sur les sites web et même sur des t-shirts. Pour ceux qui ont été enlevé par des extraterrestre et qui viennent juste de débarquer sur Terre, ces petits carrés s’appellent des QR Code (ou code QR si on veut franciser le terme).

Ce sont des codes-barres en deux dimensions comme ceux que l’on trouve sur les emballages d’aliments à la différence qu’ils peuvent être lu sans tenir compte du sens (vertical ou horizontal) et sont largement utilisés dans la communication.

Le QR code est sous licence libre, ce qui a permis l’émergence de nombreux lecteurs et générateurs. Si vous aussi, vous voulez développer votre générateur de QR code ou intégrer cette fonctionnalité  à votre site web, rien de plus simple.

PHP propose une librairie facile d’utilisation, qui permet de générer ces codes-barres très simplement en y intégrant tout type d’informations.

Librairie PHP QR Code

  • Poids de la librairie : 224 ko
  • Site officiel : http://phpqrcode.sourceforge.net
  • Fonctionnalités :
    • Support de QR code de différentes tailles (1-40)
    • Aucune dépendance externe sauf GD2
    • Export en PNG et JPG
    • Librairie TCPDF incluse pour la génération de PDF
    • Utilisation du cache pour une génération rapide

Cette librairie est simple d’utilisation : une fois la librairie téléchargée et installée dans un répertoire sur votre serveur, il vous suffit de faire l’inclusion dans votre fichier d’appel. Pour faire simple, nous l’aurons dans un fichier « index.php ». Ensuite nous définirons les paramètres du QR Code.

  • $contenu : est le type de donnée contenu dans le QR code. Celui-ci peut être un numéro de téléphone, un lien vers un site web, une application sur le Google play ou l’App Store ou encore des coordonnées géographiques. Le type de donnée se base sur les Schemes URI standardisés qui permettent ainsi aux smartphones de comprendre le contenu en fonction des applications installées.

Par exemple, si un lien vers une page Facebook est intégré au QR Code et que l’application Facebook est installée sur votre smartphone, la lecture du code déclenchera l’ouverture de l’application plutôt que de simplement se rendre sur le site.

  • $nomFichier : est le nom du fichier généré. Vous pouvez le nommer comme vous voulez, vous devez simplement vous assurer de lui donner la bonne extension (PNG ou JPG).
  • $niveauCorrection : niveau de redondance pour la correction d’erreur. C’est ce qui fait que le QR code est plus ou moins dense et plus ou moins lisible. Il existe 4 niveaux de correction d’erreur du QR Code L, M, Q, H. L étant le niveau le plus bas.
  • $taillePixelQR : correspond à la taille des carrés à l’intérieur du code barre 2D. Plus cette valeur est élevée, plus les éléments à l’intérieur du QR Code seront grands et plus le.
  • $tailleBordQR : correspond a la taille de la bordure autour du QR Code. Bien entendu, plus cette valeur et élevée, plus la bordure blanche autour du code sera grande.

La ligne ci-dessous permet de générer une image PNG du code.

QRcode::png($contenu, $nomFichier, $niveauCorrection, $taillePixelQR, $tailleBordQR)

Exemple de code:

 

QR Code twitter blog geek Nyini

Scannez moi!!

Avec le code ci-dessus, nous obtenons ce QR Code. Comme vous pouvez le voir dans l’exemple, nous utilisons le Scheme URI pour Twitter qui permet de lancer l’application officielle sur votre Smartphone. N’hésitez pas à scanner l’image générée et à nous suivre sur Twitter au passage ;p Vous vous demandez sûrement comment ça se fait que les dessins à l’intérieur du code ne soient pas de petits carrés comme dans la plupart de ceux que vous pouvez voir sur les affiches en ville ou alors comment obtenir les coins arrondis? C’est là que va intervenir la bibliothèque de manipulation d’image ImageMagick.

La bibliothèque ImageMagick pour PHP

La bibliothèque ImageMagick est puissante et permet tout comme GD d’effectuer des actions directement sur les images à partir de code. On peut donc retravailler les dimensions, les flous, les couleurs et pleins d’autres caractéristiques des images sans sortir son Gimp ou son Photoshop.

Après l’installation, nous allons ajouter les lignes de codes ci-dessous dans notre ficher index.php utilisé pour générer notre image.

  • $imageQR = new Imagick(« qrcode.png ») : On définit une variable contenant le fichier généré précédemment.
  • $hauteurQR = $imageQR->getImageHeight() : Retourne la hauteur de l’image
  • $largeurQR = $imageQR->getImageWidth() : Retourne la largeur de l’image
  • $imageQR->resizeImage($largeurQR * 4, $hauteurQR * 4, Imagick::FILTER_POINT, 0) : Redimensionne une image à la hauteur et à la largeur désirée, en appliquant une constante de filtre. Dans notre cas FILTER_POINT avec un facteur de flou à 0 pour conserver une lecture correcte de l’image retournée
  • $imageQR->medianFilterImage(15) : Ici on applique un filtre qui améliore la qualité de l’image avec du bruit. Chaque pixel est remplacé par la médiane de son voisinage. On définit le voisinage par un rayon (15)
  • header(« Content-Type: image/png ») : Permet de faire comprendre au navigateur que la sortie de fichier est une image, ce qui permet d’éviter le téléchargement automatique après génération.
  • echo $imageQR : Là on affiche tout simplement notre nouveau QR code.

code complet de l'application

Les différents types de QR et les schémas URI les plus utilisés

Site web :http://lien-vers-le-site.com

Mail : mailto:adresse@mailcom?subject=sujet-du-message&body=corps-du-message

SMS : sms:694666335

Téléphone : tel:824464335

Facebook : fb://profile-facebook

Twitter : twitter://user?screen_name=profil-twitter

Carte de visite : mecard:n:prénom,nom;adr:adresse1, adress2, ville, code-postal;TEL:téléphone;EMAIL:adresse@mail.com;;

Géolocalisation : geo:latitude,longitude

Skype : skype:nom-utilisateur-skype?call

Accès WIFI : WIFI:T:protocole-de-securité;S:nom-reseau;P:mot-de-passe;;

Pour plus d’informations sur les schemes URI, vous pouvez consulter la page Wikipedia dédiée aux schemas d’URI.

Conclusion: sortez vos lecteurs de QR code et flasher le code ci-dessous

Scannez-moi pour lire la conclusion

Scannez-moi pour lire la conclusion de l’article


Vous avez aimé cet article ? partagez le sur les réseaux sociaux !