Comment générer et intégrer des codes QR

Vous devez ajouter un code QR à votre application web. Peut-être pour un flux de paiement, un lien partageable ou des billets d’événement. La question n’est pas de savoir s’il faut utiliser un code QR, mais comment en générer un de manière fiable dans le navigateur sans introduire de problèmes de lecture ou de sécurité.

Cet article couvre la génération côté client de codes QR en JavaScript, explique quand utiliser une sortie SVG ou Canvas, et aborde les contraintes pratiques qui affectent la fiabilité de la lecture.

Comprendre la génération vs. la lecture de codes QR

Avant d’écrire du code, distinguez deux problèmes distincts : la génération et la lecture.

La génération se produit entièrement sous votre contrôle. Vous encodez des données dans une image de code QR en utilisant des bibliothèques JavaScript. Cela fonctionne de manière fiable sur tous les navigateurs modernes.

La lecture est différente. Les API natives du navigateur pour lire les codes QR (comme la Barcode Detection API) restent expérimentales et manquent de support universel. Si votre application nécessite la lecture, prévoyez des solutions de repli—typiquement une bibliothèque JavaScript basée sur la caméra ou des champs de saisie manuelle.

Cet article se concentre sur la génération. Ne confondez pas les deux lors de la planification de votre implémentation.

Comment générer des codes QR en JavaScript

Plusieurs bibliothèques JavaScript gèrent la génération de codes QR pour le travail frontend. Les options courantes incluent qrcode, qui prend en charge la génération côté client et serveur, qrcode-generator, un encodeur JavaScript pur et léger, et l’ancienne mais toujours largement utilisée QRCode.js pour une sortie Canvas ou DOM simple. Aucune de ces bibliothèques n’est « la norme »—chacune présente des compromis en termes de taille de bundle, de formats de sortie et d’options de personnalisation.

Le schéma général ressemble à ceci :

1. Importez la bibliothèque choisie
2. Passez les données que vous souhaitez encoder (URL, texte, données vCard)
3. Spécifiez le format de sortie et les dimensions
4. Effectuez le rendu vers un élément DOM ou extrayez sous forme de data URL

La plupart des bibliothèques acceptent une configuration pour les niveaux de correction d’erreur (L, M, Q, H). Des niveaux plus élevés permettent d’endommager davantage le code tout en restant lisible—utile si vous prévoyez de superposer des logos ou d’imprimer sur des surfaces texturées.

Codes QR : SVG vs Canvas

Lorsque vous intégrez des codes QR sur le web, vous choisirez généralement entre trois formats de sortie : SVG, Canvas ou PNG/data URLs.

Sortie SVG

Le SVG est généralement le meilleur choix pour l’intégration web. Le format vectoriel s’adapte infiniment sans pixellisation, ce qui le rend idéal pour les mises en page responsive et les applications d’impression. Les tailles de fichier restent petites quelle que soit la dimension d’affichage. Le style CSS fonctionne naturellement.

Utilisez SVG quand :

• Le code QR apparaît à différentes tailles
• La qualité d’impression est importante
• Vous avez besoin de style ou d’animation basés sur CSS

Sortie Canvas

Canvas effectue le rendu vers un bitmap à une résolution spécifique. Cela fonctionne bien lorsque vous avez besoin d’un contrôle au niveau du pixel ou prévoyez de composer le code QR avec d’autres graphiques de manière programmatique.

Utilisez Canvas quand :

• Vous générez des images à télécharger
• Vous devez manipuler directement les pixels
• Vous intégrez avec d’autres graphiques basés sur Canvas

PNG/Data URLs

Les data URLs vous permettent d’intégrer le code QR sous forme de chaîne d’image encodée en base64. Cela élimine les requêtes HTTP supplémentaires mais augmente la taille de la charge utile HTML. Utile pour les modèles d’email ou les contextes où les ressources externes ne sont pas fiables.

Contraintes pratiques qui affectent la fiabilité de lecture

Un code QR qui semble correct peut quand même ne pas être lu. Surveillez ces problèmes :

Zones de silence : Les codes QR nécessitent un espace vide autour de leurs bordures—généralement quatre modules de large. Rogner cette marge empêche la lecture.

Contraste : La spécification suppose des modules sombres sur un fond clair. Les couleurs inversées ou les combinaisons à faible contraste réduisent la fiabilité. Visez au moins un rapport de contraste de 4:1.

Dimensionnement : La taille minimale lisible dépend de la distance de visualisation et de la qualité de la caméra. Pour l’affichage à l’écran, des tailles plus petites peuvent fonctionner sur les appareils modernes, mais les résultats dépendent de la distance de visualisation et de la qualité de la caméra. Pour l’impression, calculez en fonction de la distance de lecture prévue.

Superposition de logos et style intensif : Ajouter des logos au centre exploite la correction d’erreur—le scanner traite le logo comme un dommage et reconstruit les données. Cela ne fonctionne qu’avec des niveaux de correction d’erreur plus élevés (Q ou H), et un style agressif peut dépasser les limites récupérables. Testez minutieusement.

Considérations de sécurité et d’expérience utilisateur

Les codes QR qui encodent des URL créent des opportunités de phishing. Les utilisateurs ne peuvent pas inspecter la destination avant de scanner. Si votre application génère des codes QR à partir d’entrées utilisateur, validez et nettoyez ces entrées. Envisagez d’afficher l’URL encodée sous forme de texte visible à côté du code.

Pour l’accessibilité, fournissez toujours les informations encodées dans un format alternatif. Un lien visible à côté du code QR sert les utilisateurs qui ne peuvent pas ou ne veulent pas scanner.

Génération côté serveur

Bien que cet article se concentre sur les approches côté client, la génération côté serveur a des usages légitimes : réduire la taille du bundle client, mettre en cache les codes générés ou générer des codes dans des environnements sans JavaScript. Des bibliothèques existent pour Node.js, Python, Go et la plupart des autres langages backend. Les considérations de format de sortie restent les mêmes.

Conclusion

L’implémentation technique de la génération de codes QR est simple. Utilisez des bibliothèques JavaScript établies plutôt que de construire la logique d’encodage à partir de zéro. Choisissez SVG pour une intégration web évolutive et Canvas pour une manipulation d’image programmatique. La fiabilité de vos codes QR provient du respect des contraintes : maintenez les zones de silence, assurez un contraste approprié et testez avec de vrais appareils de lecture. Fournissez toujours des solutions de repli visibles à la fois pour l’accessibilité et la sécurité.

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.