QR et codes-barres
Afficher un code QR ou un code-barres (Code 128, GS1-128, EAN-13, EAN-8, UPC-A, ITF-14), et l’exporter en SVG ou en PNG.
Code QR
Un code en deux dimensions : une adresse, un texte, un accès Wi-Fi… jusqu’à 2 953 octets. Composant QRCode.
Essayer
Tapez un texte : le code se redessine à chaque frappe. Scannez-le avec un téléphone pour vérifier ce qu’il contient.
33 / 2331 octets UTF-8
Exporter
Le même tracé que l’affichage, en document SVG autonome (pour une API, un fichier, un e-mail) ou en image PNG à l’échelle choisie. Le PNG demande un navigateur ; le SVG se génère partout, serveur compris.
<svg xmlns="http://www.w3.org/2000/svg" width="296" height="296" viewBox="0 0 37 37" shape-rendering="crispEdges"><title>QR code</title><rect width="100%" height="100%" fill="#ffffff"/><path fill="#000000" d="M4 4h7v1h-7z M13 4h1v1h-1z M18 4h1v1h-1z M21 4h4v1h-4z M26 4h7v1h-7z M4 5h1v1h-1z M10 5h1v1h-1z M12 5h2v1h-2z M15 5h1v1h-1z M17 5h1v1h-1z M22 5h3v1h-3z M26 5h1v1h-1z M32 5h1v1h-1z M4 6h1v1h-1z M6 6h3v1h-3z M10 6h1v1h-1z M13 6h4v1h-4z M19 6h1v1h-1z M22 6h1v1h-1z M24 6h1v1h-1z M26 6h1v1h-1z M28 6h3v1h-3z M32 6h1v1h-1z M4 7h1v1h-1z M6 7h3v1h-3z M10 7h1v1h-1z M13 7h1v1h-1z M15 7h1v1h-1z M17 7h1v1h-1z M20 7h1v1h-1z M22 7h1v1h-1z M26 7h1v1h-1z M28 7h3v1h-3z M32 7h1v1h-1z M4 8h1v1h-1z M6 8h3v1h-3z M10 8h1v1h-1z M12 8h1v1h-1z M16 8h2v1h-2z M20 8h1v1h-1z M23 8h1v1h-1z M26 8h1v1h-1z M28 8h3v1h-3z M32 8h1v1h-1z M4 9h1v1h-1z M10 9h1v1h-1z M14 9h1v1h-1z M16 9h1v1h-1z M18 9h3v1h-3z M22 9h3v1h-3z M26 9h1v1h-1z M32 9h1v1h-1z M4 10h7v1h-7z M12 10h1v1h-1z M14 10h1v1h-1z M16 10h1v1h-1z M18 10h1v1h-1z M20 10h1v1h-1z M22 10h1v1h-1z M24 10h1v1h-1z M26 10h7v1h-7z M13 11h2v1h-2z M16 11h1v1h-1z M19 11h1v1h-1z M21 11h1v1h-1z M23 11h2v1h-2z M4 12h1v1h-1z M6 12h1v1h-1z M8 12h1v1h-1z M10 12h1v1h-1z M13 12h1v1h-1z M16 12h1v1h-1z M20 12h2v1h-2z M28 12h1v1h-1z M31 12h1v1h-1z M4 13h1v1h-1z M11 13h2v1h-2z M17 13h1v1h-1z M19 13h3v1h-3z M24 13h3v1h-3z M29 13h1v1h-1z M32 13h1v1h-1z M5 14h6v1h-6z M12 14h1v1h-1z M14 14h3v1h-3z M18 14h3v1h-3z M25 14h1v1h-1z M27 14h2v1h-2z M30 14h3v1h-3z M4 15h3v1h-3z M11 15h3v1h-3z M17 15h2v1h-2z M20 15h8v1h-8z M31 15h1v1h-1z M5 16h1v1h-1z M7 16h2v1h-2z M10 16h2v1h-2z M13 16h3v1h-3z M18 16h4v1h-4z M23 16h4v1h-4z M29 16h1v1h-1z M31 16h2v1h-2z M7 17h1v1h-1z M12 17h5v1h-5z M18 17h2v1h-2z M21 17h2v1h-2z M25 17h2v1h-2z M29 17h1v1h-1z M32 17h1v1h-1z M4 18h1v1h-1z M6 18h1v1h-1z M9 18h2v1h-2z M12 18h1v1h-1z M16 18h2v1h-2z M20 18h3v1h-3z M24 18h1v1h-1z M26 18h1v1h-1z M28 18h2v1h-2z M31 18h2v1h-2z M5 19h1v1h-1z M7 19h2v1h-2z M11 19h2v1h-2z M16 19h1v1h-1z M19 19h1v1h-1z M21 19h1v1h-1z M23 19h2v1h-2z M27 19h3v1h-3z M31 19h1v1h-1z M5 20h6v1h-6z M12 20h4v1h-4z M21 20h1v1h-1z M26 20h1v1h-1z M29 20h1v1h-1z M31 20h2v1h-2z M5 21h3v1h-3z M12 21h1v1h-1z M14 21h1v1h-1z M16 21h2v1h-2z M20 21h2v1h-2z M24 21h3v1h-3z M29 21h2v1h-2z M32 21h1v1h-1z M4 22h1v1h-1z M7 22h2v1h-2z M10 22h3v1h-3z M16 22h1v1h-1z M18 22h1v1h-1z M20 22h3v1h-3z M24 22h2v1h-2z M27 22h2v1h-2z M31 22h2v1h-2z M5 23h1v1h-1z M8 23h2v1h-2z M11 23h2v1h-2z M14 23h1v1h-1z M16 23h4v1h-4z M21 23h3v1h-3z M27 23h3v1h-3z M31 23h1v1h-1z M4 24h1v1h-1z M6 24h1v1h-1z M10 24h2v1h-2z M14 24h3v1h-3z M18 24h1v1h-1z M21 24h1v1h-1z M23 24h6v1h-6z M12 25h2v1h-2z M18 25h1v1h-1z M20 25h2v1h-2z M24 25h1v1h-1z M28 25h1v1h-1z M30 25h3v1h-3z M4 26h7v1h-7z M14 26h2v1h-2z M17 26h1v1h-1z M23 26h2v1h-2z M26 26h1v1h-1z M28 26h2v1h-2z M31 26h2v1h-2z M4 27h1v1h-1z M10 27h1v1h-1z M13 27h2v1h-2z M16 27h1v1h-1z M19 27h1v1h-1z M21 27h2v1h-2z M24 27h1v1h-1z M28 27h2v1h-2z M4 28h1v1h-1z M6 28h3v1h-3z M10 28h1v1h-1z M12 28h1v1h-1z M14 28h2v1h-2z M20 28h2v1h-2z M24 28h5v1h-5z M32 28h1v1h-1z M4 29h1v1h-1z M6 29h3v1h-3z M10 29h1v1h-1z M13 29h1v1h-1z M16 29h1v1h-1z M20 29h1v1h-1z M27 29h2v1h-2z M30 29h3v1h-3z M4 30h1v1h-1z M6 30h3v1h-3z M10 30h1v1h-1z M12 30h2v1h-2z M15 30h1v1h-1z M17 30h1v1h-1z M20 30h1v1h-1z M23 30h2v1h-2z M27 30h3v1h-3z M32 30h1v1h-1z M4 31h1v1h-1z M10 31h1v1h-1z M13 31h1v1h-1z M16 31h1v1h-1z M18 31h1v1h-1z M20 31h2v1h-2z M23 31h2v1h-2z M26 31h1v1h-1z M28 31h1v1h-1z M31 31h1v1h-1z M4 32h7v1h-7z M12 32h1v1h-1z M14 32h4v1h-4z M19 32h6v1h-6z M27 32h1v1h-1z M31 32h2v1h-2z"/></svg>
Tailles
Cinq tailles prédéfinies, un nombre de pixels, ou « full » pour la largeur du conteneur.
Niveaux de correction
Le même contenu aux quatre niveaux : plus le code supporte de dégâts, plus il compte de modules.
Couleurs et fond
Le fond fait partie du code : sur une surface sombre il reste clair. Rendu transparent, le code s’inverse et beaucoup de lecteurs ne le lisent plus.
Marge blanche
Quatre modules par défaut, comme le demande la norme. Réduite à un, le code se lit mal dès qu’il touche un autre motif.
Contenus
Contenu trop long
Au-delà de la capacité d’un code QR, le composant n’affiche rien et appelle onError avec une QRCodeCapacityError : le mode, la longueur, la limite et le niveau.
Codes-barres
Les codes linéaires : Code 128 pour tout texte ASCII, GS1-128 pour les étiquettes logistiques, EAN-13, EAN-8 et UPC-A pour les articles, ITF-14 pour les cartons. Composant Barcode.
Essayer
Choisissez un format, tapez un contenu : le code se redessine à chaque frappe. Scannez-le avec un téléphone (Google Lens, l’appareil photo) pour vérifier ce qu’il contient.
Exporter
Le même symbole que l’affichage, texte compris : en SVG autonome (partout, serveur compris) ou en PNG à l’échelle choisie (navigateur).
Tailles
Chaque taille fixe la largeur d’un module, en pixels entiers pour des barres nettes, et la hauteur des barres. « full » prend la largeur du conteneur.
Marge verticale
La norme n’impose pas de marge en haut et en bas : celle-ci est pour l’œil, 6 modules par défaut. Un nombre pour les deux, ou { top , bottom }. Les marges de côté, elles, sont celles du format (quietZone).
Les six formats
EAN-13 et EAN-8 pour les articles, UPC-A pour l’Amérique du Nord (les mêmes barres qu’un EAN-13 commençant par 0), Code 128 pour tout texte ASCII, GS1-128 pour les étiquettes logistiques, ITF-14 pour les cartons.
Présentation du texte
En présentation commerce, les barres de garde descendent plus bas et chaque chiffre se place sous ses barres ; le premier chiffre d’un EAN-13 est dans la marge, les deux chiffres extérieurs d’un UPC-A sont plus petits.
Le texte : taille, police, graisse, couleur
Réglé par props et jamais par CSS, pour que les exports suivent. En présentation commerce, textScale reste entre 0,5 et 1,2 ; les chiffres se chevaucheraient au-delà. Le texte n’est jamais lu par le scanner : changer la police ne change rien aux barres.
GS1-128 : les étiquettes logistiques
Un Code 128 qui porte des identifiants GS1 entre parenthèses : (00) le SSCC d’une palette, (01) le GTIN de l’article, (10) le lot, (17) la péremption… Les longueurs fixes et les chiffres de contrôle sont vérifiés ; un séparateur est placé après chaque identifiant à longueur variable. Un scanner le rapporte comme code_128.
ITF-14 : les cartons
Le code des unités logistiques, imprimé en grand sur le carton : barres larges 2,5 fois plus larges que les fines, et un cadre (barres de support) qui protège la lecture quand l’impression bave. Un scanner le rapporte comme itf.
Code 128 : le jeu C pour les chiffres
Le jeu C range deux chiffres par symbole : une suite de chiffres assez longue y bascule, et le code raccourcit.
Chiffre de contrôle
Sur fond sombre
Le fond fait partie du code : il reste clair quel que soit le thème.