- Convertir un lien en QR Code

Qu'est-ce qu'un QR Code ?

Le QR Code (Quick Response Code) est un code-barres bidimensionnel inventé en 1994 par la société japonaise Denso Wave. Contrairement aux codes-barres classiques, un QR Code peut encoder jusqu'à 4 296 caractères alphanumériques dans une surface carrée lisible en une fraction de seconde par n'importe quel smartphone.

Les 4 niveaux de correction d'erreur

Pourquoi utiliser un QR Code ?

Comment fonctionne notre générateur ?

Notre outil génère le QR Code entièrement côté navigateur, sans envoyer vos données à aucun serveur. L'URL saisie ne quitte jamais votre machine.

Technologie utilisée — QRCode.js

La génération repose sur la bibliothèque open-source QRCode.js, qui encode l'URL en binaire selon la norme ISO/IEC 18004, puis dessine le QR Code dans un <canvas> HTML5 :

// Utilisation de QRCode.js
new QRCode(document.getElementById('qr-container'), {
  text: 'https://www.angularforall.com/',
  width: 220,
  height: 220,
  colorDark: '#1a1a2e',
  colorLight: '#ffffff',
  correctLevel: QRCode.CorrectLevel.H   // 30% de récupération d'erreur
});

// Rendu dans un canvas HTML5 :
// → téléchargeable via canvas.toDataURL('image/png')
// → lisible par tout scanner mobile sans application tierce

Processus d'encodage en 4 étapes

1. Analyse du contenu : détection du mode d'encodage optimal selon les caractères de l'URL.
2. Génération des données : conversion en flux binaire avec bits de correction Reed-Solomon.
3. Placement des modules : disposition dans la grille selon un algorithme de masquage optimisant la lisibilité.
4. Rendu canvas : chaque module dessiné pixel par pixel, exportable en PNG sans perte.

Téléchargement PNG — fonctionnement

// Extraction du PNG depuis le canvas HTML5
function downloadQR() {
  const canvas = document.querySelector('#url-qr-code canvas');
  const link   = document.createElement('a');
  link.download = 'qrcode-' + Date.now() + '.png';
  link.href     = canvas.toDataURL('image/png'); // Base64 → PNG
  link.click();  // téléchargement natif du navigateur
}
// Résultat : PNG 220×220px, fond blanc, modules sombres, 3-8 Ko

Cas d'usage professionnels

Le QR Code s'est imposé comme un standard de communication visuelle dans de nombreux secteurs. Voici les usages les plus courants et comment les implémenter efficacement.

Supports print — Flyers, affiches, cartes de visite

• 📄 Flyers et brochures : Renvoie vers une page d'inscription ou un programme détaillé. Le visiteur scanne et accède en 1 seconde, sans saisie manuelle.
• 📇 Cartes de visite : Encodez votre URL LinkedIn, portfolio ou vCard. 78% des professionnels ont un scanner QR installé.
• 🪧 Affiches et kakémonos : Minimum 3×3 cm en impression. Un code de 10 cm se scanne jusqu'à 4 mètres.
• 📦 Emballages produits : Notices, tutoriels vidéo, traçabilité, informations nutritionnelles.

Restauration et menus digitaux

# Workflow QR Code restaurant
1. URL du menu digital : https://restaurant.fr/menu-printemps-2026
2. Générer le QR Code → télécharger le PNG
3. Intégrer dans le template table (Canva, Figma, Illustrator)
   → Taille recommandée sur présentoir : 6×6 cm minimum
4. Plastifier ou imprimer sur support lavable
# Avantage : modifier le menu en ligne sans réimprimer les tables

Événements et conférences

• 📋 Badges : QR Code encodant le profil LinkedIn pour un networking instantané
• 🎤 Slides : QR Code sur la dernière slide pour partager les ressources ou un formulaire de feedback
• 🗳️ Sondages : QR Code pointant vers Mentimeter ou un Google Form pour des questions en temps réel
• 📍 Signalétique : QR Codes aux stands pour rediriger vers catalogues ou prises de contact

Signatures email et réseaux sociaux

# Exemples d'URL à encoder selon le contexte
Portfolio / CV :       https://monsite.fr/cv
LinkedIn :             https://linkedin.com/in/prenom-nom
Calendly (RDV) :       https://calendly.com/moncompte/30min
Page produit :         https://boutique.fr/produit-phare
Formulaire contact :   https://monsite.fr/contact
Menu restaurant :      https://restaurant.fr/menu

QR Code et marketing digital

Depuis la démocratisation des smartphones avec scanner natif (iOS 11+ et Android 8+), le QR Code est redevenu un levier marketing incontournable. Le taux de scan a augmenté de 433% entre 2019 et 2022.

Combiner QR Code et paramètres UTM

# URL avec tracking UTM pour un QR Code d'affiche
https://www.boutique.fr/soldes?
  utm_source=affiche&
  utm_medium=print&
  utm_campaign=soldes_ete_2026&
  utm_content=vitrine_paris_12

# Dans Google Analytics 4 vous voyez :
# Source : affiche | Medium : print | Campaign : soldes_ete_2026
# → ROI de chaque affiche physique précisément mesuré

QR Code statique vs dynamique

Personnalisation avancée — Logo centré

// Ajouter un logo au centre (niveau H obligatoire — 30% récupération)
const canvas = document.querySelector('#url-qr-code canvas');
const ctx    = canvas.getContext('2d');
const logo   = new Image();
logo.onload  = () => {
  const size = 44;
  const x = (canvas.width  - size) / 2;
  const y = (canvas.height - size) / 2;
  // Fond blanc derrière le logo
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(x - 4, y - 4, size + 8, size + 8);
  ctx.drawImage(logo, x, y, size, size);
};
logo.src = '/assets/images/logo.png';
// Le logo peut couvrir jusqu'à 25% de la surface sans impact scan

Bonnes pratiques de conception

Un QR Code techniquement valide peut tout de même être difficile à scanner si les contraintes de conception ne sont pas respectées.

Taille minimale selon le support

Contraste et couleurs

✅ Combinaisons valides :
  #000000 sur #FFFFFF  → contraste 21:1 (parfait)
  #1a1a2e sur #FFFFFF  → contraste 17:1 (excellent)

❌ À éviter :
  Fond noir + modules blancs → certains scanners échouent
  Modules colorés sur fond coloré → contraste insuffisant
  Fond PNG transparent → problème sur support coloré

Zone silencieuse (Quiet Zone)

• Marge minimum : 4 modules de chaque côté
• Ne jamais placer de texte ou d'image dans la zone silencieuse
• Sur fond coloré : rectangle blanc englobant le QR Code + sa marge
• Notre générateur inclut automatiquement cette marge dans le PNG

Spécifications techniques

Comprendre les spécifications permet d'optimiser l'encodage selon vos contraintes d'URL et de support.

Capacité d'encodage par version

# Capacité selon la version (niveau H, mode binaire)
Version 1  (21×21)   →  14 octets  — URL très courte
Version 5  (37×37)   →  47 octets  — URL courte
Version 10 (57×57)   → 109 octets  — URL moyenne
Version 20 (97×97)   → 259 octets  — URL avec UTM
Version 40 (177×177) → 1273 octets — URL très longue

# La version est choisie automatiquement par QRCode.js

Intégration dans un framework moderne

// React — composant QR Code
import { useEffect, useRef } from 'react';

function QRGenerator({ url }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current || !url) return;
    ref.current.innerHTML = '';
    new QRCode(ref.current, {
      text: url, width: 220, height: 220,
      correctLevel: QRCode.CorrectLevel.H,
    });
  }, [url]);
  return <div ref={ref} />;
}

// Vue 3 — directive personnalisée
app.directive('qrcode', {
  mounted(el, { value }) {
    new QRCode(el, { text: value, width: 220, height: 220,
      correctLevel: QRCode.CorrectLevel.H });
  },
  updated(el, { value }) {
    el.innerHTML = '';
    new QRCode(el, { text: value, width: 220, height: 220,
      correctLevel: QRCode.CorrectLevel.H });
  },
});

Génération côté serveur — Node.js

// Génération en Node.js (pour emails ou PDF dynamiques)
const QRCode = require('qrcode');

// PNG Buffer
const buffer = await QRCode.toBuffer('https://angularforall.com', {
  errorCorrectionLevel: 'H',
  width: 300,
  color: { dark: '#1a1a2e', light: '#ffffff' }
});
// → buffer PNG à envoyer dans un email (nodemailer)
// → ou à intégrer dans un PDF (pdfkit)

// SVG String (vectoriel, scalable)
const svgString = await QRCode.toString('https://angularforall.com', {
  type: 'svg',
  errorCorrectionLevel: 'H'
});
// → à intégrer directement dans un template HTML email

FAQ — Questions fréquentes sur les QR Codes

Le QR Code expire-t-il ?

Non. Le QR Code encode directement l'URL — pas de date d'expiration. Tant que l'URL de destination est accessible, le QR Code fonctionne indéfiniment. Si vous modifiez la destination, vous devrez générer un nouveau QR Code.

Mes données sont-elles envoyées à un serveur ?

Non. La génération est 100% côté navigateur via JavaScript. L'URL saisie ne quitte jamais votre machine. Aucun cookie, aucun tracking, aucun stockage serveur.

Quelle taille de PNG pour une impression ?

Notre outil génère un PNG de 220×220 pixels — suffisant pour un QR Code jusqu'à 2 cm × 2 cm à 300 DPI. Pour une impression plus grande, importez le PNG dans Inkscape (Chemin → Pottracer bitmap) pour obtenir un SVG vectoriel illimité en taille.

Pourquoi mon QR Code ne se scanne pas ?

• Contraste insuffisant — fond et modules trop proches en luminosité
• Taille trop petite — en dessous de 1.5 cm sur support imprimé
• Zone silencieuse absente — du texte touche le bord du code
• Impression basse qualité — jet d'encre trop basse résolution
• URL trop longue — génère un QR Code très dense

Puis-je encoder autre chose qu'une URL ?

Notre formulaire valide uniquement les URL http:// ou https://. Pour encoder du texte brut, un email (mailto:) ou une vCard, des outils comme QR Code Monkey proposent ces formats.

Comment ajouter un logo au centre ?

Téléchargez le PNG, puis ouvrez-le dans Canva, Figma ou Photoshop et superposez votre logo au centre. Avec le niveau H utilisé par notre générateur, jusqu'à 25% de la surface peut être masquée sans affecter la lisibilité. Testez le scan sur 3 appareils différents avant diffusion.

Différence entre QR Code statique et dynamique ?

Un QR Code statique (notre outil) encode l'URL finale directement — non modifiable après génération. Un QR Code dynamique encode une URL intermédiaire : vous pouvez changer la destination sans régénérer le code, et mesurer les scans. Services : Bitly, Flowcode, QR Code Generator Pro (abonnements payants).