Créer et personnaliser un QR Code avec JavaScript FACILEMENT

par Tychic Obanda


Programmation web | 0 commentaire



Besoin d'une carte Visa ? Procurez-vous la carte visa Fyatu à seulement 5$. Cliquez ici


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 :

QR Code Tychic Obanda

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

<!DOCTYPE html>
<html>
<head>
<title>Créer et personnaliser un QR Code avec Javascript, HTML et CSS</title>
<meta charset="utf-8″>
</head>
<body>
<div id="qrcode"></div>

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</body>
</html>

Code CSS

* {
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;
}

#qr {
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"
});


Tychic ObandaJe suis Tychic Obanda. Avant j'étais un simple visiteur des sites internet et aujourd'hui je suis devenu le créateur des sites internet. Passionné de l'internet et de la programmation, je publie sur ce site des astuces et tutoriels pour vous aider de mieux apprendre la programmation web et de vivre de cette passion.




Laisser un commentaire
Vous pouvez écrire en gras en utilisant * et en italique en utilisant _
258

0 commentaires

Recherche

Bonus Gratuit

50 conseils aux blogueurs débutants et futurs blogueurs

Un ebook écrit pour vous montrer tout ce qu'il faut pour devenir développeur web

Avatar Tychic Obanda

Envie d'apprendre plus sur la création de sites web ? Vous êtes au bon endroit ! 158 articles publiés, 1933 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve certainement ici...