Ressources pour développeur web

Théme de la semaine : Outil pentest

QR Code JavaScript : Comment coder un QR Code en JS

Temps de lecture estimé : 10 minutes
Accueil → Javascript → QR Code JavaScript : Comment coder un QR Code en JS

Avez-vous déjà pensé à coder votre propre QR Code en JavaScript ? C’est beaucoup plus simple qu’on ne l’imagine. En quelques lignes de code, vous pouvez générer un QR Code qui contient un lien, un texte, un email ou même des informations de contact.

  • Générer un QR Code en JavaScript pour partager un lien, un texte ou des informations depuis un site web.
  • Coder un générateur de QR Code interactif que les visiteurs peuvent utiliser directement dans une page web.
  • Personnaliser et télécharger un QR Code afin de l’intégrer facilement dans des projets, applications ou supports de communication.

Dans ce tutoriel du Créa-blog, vous allez apprendre comment coder un QR Code en JavaScript, étape par étape. Même si vous débutez en développement web, pas de panique : chaque principe sera expliqué simplement. À la fin de ce guide, vous serez capable de créer votre propre générateur de QR Code.

Et à la fin de ce tutoriel, vous serez capable de coder ce générateur de QR Code en JavaScript :

Générateur de QR Code en javascript

Comprendre ce qu’est un QR Code

Avant de coder quoi que ce soit, prenons quelques secondes pour comprendre ce que nous manipulons.

Un QR Code (Quick Response Code) est un type de code-barres en deux dimensions. Et contrairement aux codes-barres classiques, il peut contenir beaucoup plus d’informations.

Par exemple :

  • une URL
  • un texte
  • un numéro de téléphone
  • une adresse email
  • une carte de visite (vCard)

Le QR Code est composé de petits carrés noirs appelés modules. Leur position encode les informations.

Quand votre smartphone scanne le QR Code, il décode ces modules et transforme l’information en action : ouvrir un site, afficher un texte, etc.

QR code en Javascript

La bonne nouvelle pour nous développeurs : il n’est pas nécessaire d’encoder ces modules manuellement. Des bibliothèques JavaScript s’occupent de tout.

Pourquoi utiliser JavaScript pour générer un QR Code ?

Vous pourriez vous demander : pourquoi ne pas simplement utiliser un générateur de QR Code en ligne ?

  • La réponse est simple : le contrôle et l’automatisation.

Avec JavaScript, vous pouvez :

  • générer des QR Codes dynamiquement
  • créer un générateur sur votre site
  • personnaliser les couleurs
  • intégrer le QR Code dans une application web
  • créer des QR Codes pour chaque utilisateur

Par exemple, imaginez sur votre futur site web un QR Code permettant d’accéder directement à un service depuis un smartphone. C’est typiquement le genre d’usage où JavaScript devient très utile.

La méthode la plus simple : utiliser une bibliothèque JavaScript

Créer un QR Code « à la main » serait extrêmement complexe. Heureusement, il existe des bibliothèques JavaScript qui font tout le travail. L’une des plus simples et populaires s’appelle : QRCode.js

Elle est légère, rapide et parfaite pour les débutants.

Étape 1 : ajouter la bibliothèque QRCode.js

Pour commencer, nous devons charger la bibliothèque dans notre page HTML.

Voici un exemple de structure simple :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>QR Code JavaScript</title>
</head>

<body>

<h1>Mon premier QR Code</h1>

<div id="qrcode"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

</body>
</html>

Prenons un instant pour comprendre ce code.

Le div avec l’identifiant qrcode est l’endroit où le QR Code sera généré.

La ligne suivante charge la bibliothèque JavaScript :

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

Une fois cette bibliothèque chargée, nous pouvons générer un QR Code en quelques lignes.

Étape 2 : générer un QR Code avec JavaScript

Ajoutons maintenant le code JavaScript qui va créer le QR Code.

<script>

new QRCode(document.getElementById("qrcode"), {
    text: "https://blog.crea-troyes.fr",
    width: 200,
    height: 200
});

</script>

Et voilà. Oui, vraiment. C’est aussi simple que ça.

Maintenant analysons ce code ensemble.

new QRCode(...)

Nous créons un nouvel objet QRCode fourni par la bibliothèque.

Le premier paramètre indique où afficher le QR Code :

document.getElementById("qrcode")

Cela signifie : « Place le QR Code dans le div ayant l’identifiant qrcode. »

Le second paramètre est un objet contenant les options.

{
 text: "https://crea-troyes.fr",
 width: 200,
 height: 200
}

Voici ce que signifie chaque propriété.

  • text : C’est l’information que le QR Code contient. Ici, il s’agit d’une URL.
  • width : La largeur du QR Code en pixels.
  • height : La hauteur du QR Code.

Lorsque la page se charge, JavaScript génère automatiquement le QR Code.

Si vous scannez ce QR Code avec votre téléphone, vous serez redirigé vers : blog.crea-troyes.fr. Magique, non ?

Générer un QR Code pour un texte

Un QR Code ne sert pas uniquement à ouvrir un site web. Il peut aussi contenir un simple texte.

Voici un exemple :

new QRCode(document.getElementById("qrcode"), {
    text: "Bienvenue sur le Créa-blog",
    width: 200,
    height: 200
});

Si quelqu’un scanne ce QR Code, le téléphone affichera simplement : « Bienvenue sur le Créa-blog »

C’est un usage fréquent pour :

  • des messages
  • des instructions
  • des codes promotionnels

Générer un QR Code pour envoyer un email

Un autre usage très intéressant consiste à créer un QR Code qui ouvre un email.

Voici comment faire.

new QRCode(document.getElementById("qrcode"), {
    text: "mailto:contact@crea-troyes.fr",
    width: 200,
    height: 200
});

Lorsque quelqu’un scanne ce QR Code : son application mail s’ouvre automatiquement avec l’adresse préremplie.

Pratique pour une carte de visite ou un flyer.

Coder un générateur de QR Code interactif

Maintenant que nous avons compris le principe, passons à quelque chose de plus intéressant : un générateur de QR Code dynamique.

L’utilisateur saisira un texte et le QR Code sera généré automatiquement.

Voici un exemple complet.

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<title>Générateur QR Code JavaScript</title>
</head>

<body>

<h1>Générateur de QR Code</h1>

<input type="text" id="text" placeholder="Entrez un texte ou une URL">

<button onclick="generateQR()">Créer le QR Code</button>

<div id="qrcode"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<script>

function generateQR() {

    var text = document.getElementById("text").value;

    document.getElementById("qrcode").innerHTML = "";

    new QRCode(document.getElementById("qrcode"), {
        text: text,
        width: 200,
        height: 200
    });

}

</script>

</body>

</html>

Prenons le temps de comprendre ce qui se passe.

L’utilisateur saisit un texte dans un champ input. Lorsque le bouton est cliqué, la fonction generateQR() est appelée. Elle récupère la valeur du champ :

var text = document.getElementById("text").value;

Ensuite, on vide l’ancien QR Code :

document.getElementById("qrcode").innerHTML = "";

Puis on en génère un nouveau avec le texte entré.

  • Vous avez créé votre premier générateur de QR Code en JavaScript.

Et franchement… pour quelques lignes de code, c’est plutôt satisfaisant.

Maintenant, passons à des fonctionnalités plus intéressantes. Car dans la vraie vie, un QR Code n’est presque jamais utilisé “brut”. On souhaite souvent le personnaliser, l’intégrer dans une interface, ou encore permettre son téléchargement.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Personnaliser un QR Code en JavaScript

Un QR Code noir et blanc fonctionne très bien… mais soyons honnêtes : ce n’est pas toujours très esthétique.

La bonne nouvelle, c’est que la bibliothèque QRCode.js permet de modifier facilement certains paramètres comme les couleurs.

Modifier les couleurs du QR Code

Voici un exemple de QR Code personnalisé.

<div id="qrcode"></div>

<script>

new QRCode(document.getElementById("qrcode"), {
    text: "https://formation.crea-troyes.fr",
    width: 200,
    height: 200,
    colorDark : "#C00",
    colorLight : "#ffffff"
});

</script>

Deux nouvelles propriétés apparaissent ici.

qr code en JS de couleurs

colorDark

Cette propriété définit la couleur des modules du QR Code (les petits carrés). Par défaut, ils sont noirs. Mais vous pouvez utiliser n’importe quelle couleur CSS :

colorDark : "#C00"

colorLight

Cette propriété correspond à la couleur de fond :

colorLight : "#f5f5f5"

Attention toutefois : pour qu’un QR Code reste lisible, il faut garder un bon contraste entre les deux couleurs.

Par exemple :

  • noir / blanc
  • bleu foncé / blanc
  • violet / beige

Mais évitez les combinaisons trop proches comme gris clair / blanc. Sinon… votre QR Code deviendra un joli carré décoratif totalement inutile.

Modifier la taille du QR Code

La taille est contrôlée par deux propriétés :

width
height

Par exemple :

width: 300,
height: 300

Cela crée un QR Code plus grand, ce qui peut être utile pour :

  • une affiche
  • une page imprimée
  • un écran de présentation

À l’inverse, un QR Code plus petit peut être utilisé dans une interface web compacte.

Générer un QR Code automatiquement lors de la saisie

Dans notre premier exemple, il fallait cliquer sur un bouton pour générer le QR Code.

Mais dans une application moderne, on préfère souvent que le QR Code se mette à jour automatiquement pendant que l’utilisateur tape.

<input type="text" id="text" placeholder="Entrez une URL">

<div id="qrcode"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<script>

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "",
    width: 200,
    height: 200
});

document.getElementById("text").addEventListener("keyup", function() {

    var value = this.value;

    document.getElementById("qrcode").innerHTML = "";

    new QRCode(document.getElementById("qrcode"), {
        text: value,
        width: 200,
        height: 200
    });

});

</script>

Nous utilisons un événement JavaScript :

keyup

Cet événement se déclenche chaque fois qu’une touche est relâchée dans le champ texte.

Autrement dit : dès que l’utilisateur tape quelque chose, le QR Code se met à jour. Ce type de fonctionnement est très courant dans les applications modernes.

👉 Pour aller plus loin : Écoute et gestion d’évènement

Permettre de télécharger le QR Code

Un générateur de QR Code est beaucoup plus utile si l’utilisateur peut télécharger l’image.

Pour cela, nous devons récupérer le QR Code généré dans un canvas.

Exemple avec bouton de téléchargement

<div id="qrcode"></div>

<button onclick="downloadQR()">Télécharger</button>

Ajoutons maintenant la fonction JavaScript.

function downloadQR() {

    var canvas = document.querySelector("#qrcode canvas");

    var image = canvas.toDataURL("image/png");

    var link = document.createElement("a");

    link.href = image;

    link.download = "qrcode.png";

    link.click();

}

Prenons le temps de comprendre.

Récupérer le canvas

var canvas = document.querySelector("#qrcode canvas");

La bibliothèque QRCode génère l’image sous forme de canvas HTML.

Nous allons récupérer cet élément.

Convertir le QR Code en image

canvas.toDataURL("image/png")

Cette méthode transforme le canvas en image PNG encodée en base64.

Créer un lien de téléchargement

Nous créons ensuite un lien invisible :

var link = document.createElement("a");

Puis nous définissons le nom du fichier :

link.download = "qrcode.png";

Et enfin nous simulons un clic :

link.click();

Résultat : l’image se télécharge automatiquement.

Générateur de QR Code complet

Mettons maintenant tout cela ensemble pour créer un petit générateur.

Voici un exemple simple mais très fonctionnel.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>QR Code JavaScript</title>
</head>

<body>

<h1>Créer un QR Code</h1>

<input type="text" id="text" placeholder="Entrez une URL">

<button onclick="generateQR()">Générer</button>

<div id="qrcode"></div>

<button onclick="downloadQR()">Télécharger</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<script>

function generateQR() {

    var text = document.getElementById("text").value;

    document.getElementById("qrcode").innerHTML = "";

    new QRCode(document.getElementById("qrcode"), {
        text: text,
        width: 200,
        height: 200,
        colorDark: "#000",
        colorLight: "#fff"
    });

}

function downloadQR() {

    var canvas = document.querySelector("#qrcode canvas");

    if(!canvas) return;

    var image = canvas.toDataURL("image/png");

    var link = document.createElement("a");

    link.href = image;

    link.download = "qrcode.png";

    link.click();

}

</script>

</body>

</html>

Avec cet exemple, vous venez de créer :

  • un champ texte
  • un générateur de QR Code
  • un bouton de téléchargement

Autrement dit, vous avez déjà un véritable outil de génération de QR Code en JavaScript.

Et si vous ajoutez un peu de CSS… cela peut devenir une application très propre.

Cas d’usage des QR Code en JavaScript

Maintenant que vous savez comment coder un QR Code JavaScript, voyons dans quels cas cette technique est utilisée.

Sur le web, les QR Codes dynamiques sont très utiles. Par exemple, on peut les utiliser pour :

  • créer des billets d’événement
  • générer des accès WiFi
  • partager rapidement une page web
  • créer des cartes de visite numériques
  • authentifier un utilisateur

Certaines applications utilisent même les QR Codes pour se connecter à un compte sans mot de passe.

  • Vous avez peut-être déjà vu cela avec WhatsApp Web ou Discord.

Dans ce cas, le QR Code contient un token sécurisé qui permet d’authentifier la session.

Les limites d’un QR Code

Un QR Code peut contenir beaucoup d’informations, mais il existe des limites. Plus les données sont longues, plus le QR Code devient dense. Et plus il devient dense, plus il devient difficile à scanner.

C’est pourquoi il est recommandé :

  • d’utiliser des URLs courtes
  • d’éviter les textes trop longs
  • d’utiliser un bon contraste

Dans la pratique, les QR Codes servent surtout à rediriger vers un site.

Créer un QR Code en JavaScript est finalement beaucoup plus simple qu’on pourrait l’imaginer. En utilisant une bibliothèque légère comme QRCode.js, quelques lignes de code suffisent pour générer un QR Code fonctionnel, le personnaliser et même permettre son téléchargement.

Mais derrière cette simplicité se cache un outil extrêmement puissant. Que ce soit pour partager un lien, créer un accès rapide à une application ou générer des identifiants dynamiques, les QR Codes sont devenus un élément incontournable du web moderne.

Et maintenant que vous savez comment créer un QR Code JavaScript, vous pouvez l’intégrer dans vos propres projets. Pourquoi ne pas imaginer un générateur de QR Codes sur votre site, ou même l’intégrer dans une application interactive ?

Après tout, le meilleur moyen de progresser en développement web… reste toujours le même : tester, expérimenter et coder.

Articles relatifs

  1. Coder une application de dessin en HTML et Javascript
    Dans ce tutoriel, nous allons découvrir ensemble comment créer une application de dessin en ligne simple mais complète. Cette application de dessin en HTML et Javascript vous permettra de dessiner…
  2. API javascript MediaRecorder et Audio : Coder un dictaphone
    Cet article explore le processus d’enregistrement et de visualisation d’audio en utilisant les API Web Audio et MediaRecorder. Nous allons décomposer un exemple de code et expliquer comment il fonctionne…
  3. MediaDevices : utiliser la webcam et le micro en JavaScript
    Apprenez à utiliser MediaDevices en JavaScript pour accéder à la webcam et au micro, créer une visio ou scanner un QR code, avec des explications claires et accessibles aux débutants….
  4. Tracer une fonction mathématique en HTML et JavaScript
    Vous souhaitez créer votre propre application pour tracer la courbe d’une fonction mathématique ? Dans cet tutoriel, nous allons apprendre à créer une application web complète en HTML, CSS et JavaScript, capable…