Bonjour les amis, Cet article va être un article très court où je vous montrerai comment générer un QR Code pour n’importe quel contenu en JavaScript.

Évidemment, je ne vais pas tout implémenter à partir de zéro et pourquoi devrait-on le faire alors que nous avons une pléthore de bibliothèques utiles en JavaScript.

Je suis donc tombé sur cette impressionnante bibliothèque légère : qrcodeJS .

Voici le resultat que vous aurez en suivant les codes que j’ai utilisé dans cet article :

Il est très facile à utiliser et est également fiable.

Tout d’abord, commencez par télécharger la bibliothèque qrcodeJS sur ce lien :

 qrcodejs

Et ensuite extrayez-le.

Vous pouvez maintenant utiliser le fichier qrcode.js et qrcode.min.js dans votre projet.

Code HTML

Créer et personnaliser un QR Code avec Javascript, HTML et CSS

Code à

• {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  }

html,
body {
height: 100%;
}

body {
display: flex;
align-items: center;
justify-content: center;
background: #040404;
}

position: relative;
}

qr::before {

content: «  »;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

/* ne mettez pas une taille trop grande. sinon le qr code ne sera plus lisible */
width: 36%;
height: 36%;
border-radius: 50%;

background: url(« https://www.243tech.com/avatar.png ») no-repeat center;
background-size: cover;
}

Code JavaScript

const href = « https://www.243tech.com »;
const size = 300;

new QRCode(document.querySelector(« #qrcode »), {
text: href,
width: size,
height: size,

colorDark: « #000014 »,
colorLight: « #0099ff »
});

Lire aussi:

Comment supprimer une page dans un document Word