jQuery – QRCode – Générez vos propres QRCodes

Posted By Franck Pertegas on 27 Mai 2011 in Framework, Javascript, Programmation | 0 comments

Aujourd’hui, je vais vous présenter un plugin jQuery très simple d’utilisation, qui va vous permettre de générer vos propres codes QR ou QR codes pour les anglais.

Pour rappel, qu’est-ce que le QR Code ?

Wikipédia a dit :

Le code QR (en anglais, QR code pour Quick Response) est un code-barres en deux dimensions (ou code à matrice) constitué de modules noirs disposés dans un carré à fond blanc. Le nom QR est l’acronyme de l’anglais Quick Response, car son contenu de données peut être décodé rapidement. Destiné à être lu par un lecteur de code-barres QR, un téléphone mobile, ou un smartphone, il a l’avantage de pouvoir stocker plus d’informations qu’un code à barres

jquery-qrcode-ludikreation-js

Maintenant, vous avez envie de créer le votre de QR Code, pour cela, nous allons utiliser jquery.qrcode.js, un plugin jQuery qui n’a pas besoin de téléchargement d’image ou d’inscription à un quelconque site de génération de codes. C’est un plugin indépendant, sauf de jQuery bien entendu 🙂

Pour se faire, téléchargez le plugin via github.

Ensuite, voilà comment se dernier est utilisé :

Appel des librairies :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

Puis le script de génération :

$('#output_qrcode').qrcode("https://blog.ludikreation.com");

Cependant, il vous faut l’élément avec l’id « output_qrcode » dans votre document, soit :

<div id="output_qrcode"></div>

Et là vous avez un beau QR Code de 256x256px généré avec un lien vers ce blog.
En fait, le script va générer une balise HTML5 « canvas » qui n’est donc pas visible sur certains anciens navigateurs.

Vous avez un exemple, sur la fiche de LudiKreation dans l’annuaire de sites web de LudiKreation.

Retrouvez le site de l’auteur : http://jeromeetienne.github.com/jquery-qrcode
Le plugin ici : https://github.com/jeromeetienne/jquery-qrcode

Articles qui peuvent vous intéresser :