Générateur de QR code

LE HTML

<input id="lien" value="https://tanuki-corporation.com">
<canvas id="qr" width="240" height="240"></canvas>
<a id="png" download="qr-code.png">Télécharger</a>

ENCODER

L'encodeur renvoie la taille de la grille et une fonction qui dit si un module est noir. Dans un projet, prenez une bibliothèque éprouvée comme qrcode-generator.

const q = QR.encoder(document.getElementById('lien').value);

DESSINER

Une marge de 4 modules blancs autour est obligatoire pour que la lecture marche.

function dessiner(q) {
  const marge = 4, n = q.taille + marge * 2, px = Math.floor(240 / n);
  const cv = document.getElementById('qr'), ctx = cv.getContext('2d');
  cv.width = cv.height = n * px;
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, cv.width, cv.height);
  ctx.fillStyle = '#000';
  for (let y = 0; y < q.taille; y++)
    for (let x = 0; x < q.taille; x++)
      if (q.module(x, y)) ctx.fillRect((x + marge) * px, (y + marge) * px, px, px);
}

TÉLÉCHARGER EN PNG

toDataURL transforme le canvas en image, l'attribut download fait le reste.

document.getElementById('png').href = document.getElementById('qr').toDataURL('image/png');

EXPORTER EN SVG

Un chemin par module noir : le fichier reste net à n'importe quelle taille d'impression.

function svg(q) {
  let d = '';
  for (let y = 0; y < q.taille; y++)
    for (let x = 0; x < q.taille; x++)
      if (q.module(x, y)) d += `M${x + 4},${y + 4}h1v1h-1z`;
  const n = q.taille + 8;
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n} ${n}"><rect width="100%" height="100%" fill="#fff"/><path d="${d}"/></svg>`;
}