Processus étape par étape de génération d’un code QR
Cette application de démonstration en JavaScript visualise en détail le processus par lequel une chaîne de texte est encodée en symbole de code-barres QR code. Le contenu de cette page explique et justifie le fonctionnement interne d’une bibliothèque génératrice de QR codes.
Entrée utilisateur
- Chaîne de texte : "Hello world"
- Niveau de correction d’erreurs : faible, moyen, quartile, élevé
- Forcer la version minimale : entre 1 et 40
- Forcer le motif de masque : automatique (-1) ou manuel (0 à 7)
Sortie du QR code
Processus étape par étape
0. Analyse des caractères Unicode
- Nombre de points de code de la chaîne de texte saisie : 17
- Détails de chaque caractère :
- index, caractère, point de code Unicode, possibilité d’encodage en mode numérique, mode alphanumérique, mode octet, mode kanji
1. Création des segments de données
- Conversion de chaque caractère en bits
- En mode octet, un caractère génère 8, 16, 24 ou 32 bits
- Segment unique généré :
- Mode : octet
- Quantité : 17 octets
- Données : longueur de 136 bits
2. Ajustement au numéro de version
- Longueur totale en bits nécessaire pour représenter la liste des segments
- Capacité en codewords de données du QR code selon la version et le niveau de correction d’erreurs
3. Concaténation des segments, ajout du padding et génération des codewords
- Combinaison de différentes chaînes de bits
- Mode du segment, nombre de caractères, données, terminateur, padding de bits, padding d’octets
4. Découpage en blocs, ajout de l’ECC et entrelacement
- Statistiques pour tous les blocs
- Division des codewords de données en blocs courts et blocs longs, puis calcul et ajout des codewords ECC
5. Dessin des motifs fixes
- Dessin des motifs de synchronisation horizontaux et verticaux
- Dessin des motifs de repérage dans les trois coins
- Dessin de la grille des motifs d’alignement
- Dessin des bits de format temporaires
- Dessin du bloc d’informations de version
6. Dessin des codewords et du reste
- Calcul d’un balayage en zigzag pour visiter tous les modules encore vides
- Dessin des modules de données/ECC selon l’ordre du balayage en zigzag et la valeur binaire des codewords
7. Essai d’application de chaque masque
- Application du motif de masque
- Application d’un XOR de masque aux modules de données, ECC et de reste
- Dessin des bits de format réels
8. Recherche des motifs de pénalité
- Suites horizontales et verticales de modules de même couleur
- Blocs 2×2 de modules de même couleur
- Motifs de repérage horizontaux et verticaux
- Équilibre entre modules sombres et clairs
9. Calcul des points de pénalité et sélection du meilleur masque
- Méthode de calcul des points de pénalité
- Total de points de pénalité le plus bas : motif de masque 3
Informations supplémentaires
- Liens vers Wikipedia et d’autres ressources sur la conception des QR codes
Le code source TypeScript de cette application web ainsi que le code JavaScript compilé peuvent être consultés.
1 commentaires
Commentaires Hacker News
Il est regrettable que les explications en ligne sur les QR codes omettent souvent le calcul des codes correcteurs d’erreurs Reed-Solomon
Il existe une vidéo de Veritasium sur les QR codes, « I used to hate QR codes. But they're actually genius »
Les retours que reçoit l’auteur sont amusants
J’aimerais aussi voir une explication similaire sur un décodeur de QR code
J’ai déjà implémenté un QR code en Rust
Taguer l’année dans le titre d’un article est une bonne pratique (ici, 2018)
Comprendre le fonctionnement des QR codes figurait sur ma liste de choses à faire depuis longtemps, et c’était une bonne introduction
Je voulais créer rapidement un QR code, mais j’ai eu du mal à cause des sites remplis de publicités et de ceux où il faut « s’inscrire pour l’utiliser »
On pourrait ajouter davantage d’options, mais je pense que la plupart des utilisateurs n’en auront pas besoin
Maintenant que je sais comment fonctionnent les QR codes, je peux aussi les utiliser dans des requêtes SQL